Comment Dimensionner Correctement Les Images Dans WordPress (PageSpeed Insights + Élément GTMetrix)

Si vous avez géré votre site via PageSpeed Insights ou GTMetrix, vous pouvez voir une recommandation de dimensionner correctement les images.

Pour dimensionner correctement les images dans WordPress, développez l’élément dans PageSpeed Insights et affichez les images trop volumineuses. Redimensionnez-les aux dimensions correctes (trouvées dans votre rapport d’héritage GTMetrix). Enfin, remplacez l’ancienne image par la nouvelle. Retestez votre site et il devrait être à 100%.

 Dimensionnez correctement les images

Puisque PageSpeed Insights n’affiche que des images non optimisées pour la seule page que vous testez, commencez par redimensionner les images à l’échelle du site qui apparaissent sur votre site Web (images de logo, de barre latérale et de pied de page). Ensuite, exécutez d’autres pages via PageSpeed Insights et redimensionnez vos images sur celles-ci.

Puis-je utiliser un plugin pour redimensionner automatiquement les images ?
Peu probable. Vous pouvez définir une largeur + une hauteur maximales dans la plupart des plugins d’optimisation d’image. Mais différentes zones de votre site nécessitent des dimensions spécifiques (les images doivent être redimensionnées en conséquence).

Créez une feuille de triche de dimension d’image.
La meilleure façon d’éviter les erreurs de taille d’image est d’apprendre les dimensions des différentes zones de votre site Web (curseurs, widgets, logo, images de blog en pleine largeur, etc.). Ensuite, créez une feuille de triche de dimension d’image avec les dimensions de chaque zone. Si vous suivez votre feuille de triche sur les dimensions de l’image et redimensionnez les images avant de les télécharger, vous ne devriez jamais avoir d’erreurs de taille d’image correctement.

Rechercher des images surdimensionnées Dans les Rapports GTMetrix Legacy

Les rapports GTMetrix Legacy vous indiquent les dimensions correctes pour vos images volumineuses.

Créez un compte GTMetrix gratuit et accédez à Comptes > Activer les rapports hérités par défaut >.

Exécutez une page via GTMetrix et affichez la section « servir des images mises à l’échelle ». Développez leurs recommandations et vous verrez les dimensions correctes auxquelles ces images doivent être redimensionnées.

 Servir des images à l'échelle GTMetrix

Vous pouvez également vérifier manuellement si les images sont trop volumineuses. Cliquez avec le bouton droit sur une image > copier l’adresse de l’image.

 Copier l'adresse de l'image

Ensuite, collez l’URL de l’image dans un nouvel onglet du navigateur. Si vous comparez l’image affichée sur votre site Web avec l’URL de votre image, vous verrez qu’il y a une différence notable dans leurs tailles. Cela signifie que l’image doit être mise à l’échelle. En comparant les deux variantes de vos images côte à côte, vous pouvez voir la taille réelle de l’image (et pourquoi la page sur laquelle elle se trouve peut se charger lentement).

 Image mise à l'échelle vs Image non mise à l'échelle

Redimensionner Les Images Pour Corriger les dimensions

Téléchargez l’ancienne image et ouvrez-la dans l’outil de retouche d’image de votre choix (j’utilise GIMP). Redimensionnez et/ou recadrez l’image aux dimensions recommandées par GTMetrix. Certains outils d’édition d’images vous permettent de compresser des images et de supprimer des données EXIF, ce qui accélérera le chargement de l’image.

 Mise à l'échelle de l'image GIMP

Vous pouvez également recadrer et redimensionner les images directement dans WordPress:

 Mise à l'échelle de l'image Dans WordPress Media Editor

Remplacez l’Ancienne Image Par La Nouvelle

Téléchargez votre nouvelle image sur WordPress, puis remplacez l’ancienne image par la nouvelle.

 Image du widget non mise à l'échelle

 Image de widget à l'échelle

Retestez la Page Dans GTMetrix

Retestez la page dans GTMetrix (ou PageSpeed Insights) et l’erreur doit être corrigée.

 Servir des Images à l'échelle WordPress

Dimensionner Correctement Les Images Sur Mobile

Dimensionner correctement les images est différent sur mobile.

Si vous vous inscrivez à un compte GTMetrix premium, vous pouvez tester votre vitesse mobile sur Android. Il y a de fortes chances que vous voyiez plus d’erreurs d’image mises à l’échelle si votre site n’utilise pas d’images adaptatives, ce qui signifie redimensionner automatiquement les images pour les appareils mobiles (cela se fait généralement par un plugin).

Étape 1: Exécutez votre site via le test Android de GTMetrix:

 Test Mobile GTMetrix

 Servir des Images À l'Échelle Sur Mobile

Étape 2: Trouvez les dimensions d’arrière-plan de votre mobile fournies par GTMetrix:

 Largeur d'arrière-plan Maximale

Étape 3: Installez un plugin d’Images Adaptatives (je recommande ShortPixel ou Images Adaptatives).

 Images adaptatives de pixels courts

Étape 4: Définissez les dimensions fournies par GTMetrix comme largeur maximale d’arrière-plan.

 Largeur maximale d'arrière-plan

Étape 5: Réexécutez votre site via le test mobile de GTMetrix pour vous assurer qu’il n’y a pas d’erreurs.

 Test mobile GTMetrix

Étape 5: Configurez d’autres paramètres dans votre plugin adaptive images (ShortPixel inclut le support WebP, le chargement paresseux des images, le recadrage intelligent et la suppression des données EXIF). Ceux-ci peuvent aider aussi.

Redimensionner les images Sur plusieurs Pages

Si vous utilisez la même image sur plusieurs pages / publications et qu’elle doit être corrigée, vous pouvez redimensionner l’image, copier son code HTML, puis utiliser le plugin Better Search Replace pour la corriger sur plusieurs pages.

Étape 1: Installez le plugin Better Search Replace.

Étape 2: Copiez le code HTML de l’ancienne image et collez-le dans le champ « Rechercher » du plugin Better Search Replace. Vous pouvez utiliser l’éditeur de texte WordPress pour voir le code HTML de l’image. Note: Better Search Replace ne remplacera une image que si elle contient le code HTML exact que vous entrez dans le plugin.

 Meilleure recherche Remplacez les images

Étape 3: Copiez le code HTML de la nouvelle image et collez-le dans le champ « Remplacer par ».

 Servir une image mise à l'échelle HTML

Étape 4: Sélectionnez les tables (par exemple. messages) que vous souhaitez numériser et décochez « exécuter comme analyse sèche. »

Étape 5: Cliquez sur « Rechercher / Remplacer » et le plugin remplacera l’ancienne image par la nouvelle.

Créer une feuille de triche sur les dimensions de l’image

Comme je l’ai mentionné précédemment, vous devez mesurer les dimensions de toutes les zones de votre site Web afin de pouvoir redimensionner les images avant de les télécharger. Vous pouvez trouver ces dimensions dans GTMetrix (uniquement si vous avez des erreurs de taille d’image correctement) ou vous pouvez également les trouver dans la feuille de style CSS de votre thème.

Exemple:

  • Images de curseur: 1900 (l) x 400 (h)
  • Images de carrousel: 115 (l)
  • Images de widget: 414 (l)
  • Images de blog en pleine largeur: 680 (l)
  • Images en vedette: 250 (l) x 250 (h)
  • Image Facebook Yoast: 1200 (l) x 628 (h) – étape 11
  • Image Twitter Yoast 1024 (l) x 512 (h) – étape 11

680 Rectangle de largeur de pixel

La largeur de mon blog est de 680 pixels, donc chaque image de ce post a été redimensionnée à 680 pixels.

Plugins WordPress Pour dimensionner Correctement les images

La plupart des plugins d’optimisation d’image ont la possibilité de redimensionner les images, mais ce n’est pas très efficace lorsque vous essayez de corriger les erreurs dans GTMetrix, car différentes zones de votre site Web nécessitent des dimensions différentes. C’est plus pour s’assurer que vos images ne sont pas absolument énormes. Comme le dit le plugin Imagify, la largeur maximale ne doit pas être inférieure à votre plus grande vignette.

Smush

 Redimensionner les Images Smush

Imagify

 Redimensionner les Images Imagify

Optimiseur d’image EWW

 Redimensionner les Images EWWW

Autres Façons D’Optimiser les Images

J’ai écrit un tutoriel complet sur l’optimisation des images dans WordPress qui comprend:

  • Compression d’images
  • Service d’images à partir d’un CDN
  • Redimensionnement des GIF
  • Suppression des données EXIF
  • Chargement paresseux d’images + vidéos
  • Cloudflare Mirage, Polish, Protection Hotlink

 Optimisations D'Image GTMetrix

Vous Cherchez Plus De Tutoriels De Vitesse?
Voici d’autres tutoriels que j’ai écrits:

  • Guide de vitesse WordPress (ce guide a pris une éternité)
  • Comment configurer WP Rocket (le plugin de cache que je recommande)

J’ai aussi une vidéo géniale sur l’optimisation de la vitesse WordPress:

Foire aux questions

Comment réparer correctement les images de taille?

Téléchargez l’image, redimensionnez-la pour corriger les dimensions fournies par les rapports hérités GTMetrix, puis remplacez l’ancienne image par la nouvelle.

Puis-je utiliser un plugin pour dimensionner correctement les images?

Non, différentes sections de votre site Web appellent des dimensions d’image différentes. Vous devez adapter vos images à ces dimensions uniques.

Quelles images dois-je commencer à redimensionner en premier?

Commencez par mettre à l’échelle les images qui apparaissent sur plusieurs pages, comme les images de votre logo, de votre barre latérale et de votre pied de page.

Où puis-je trouver les dimensions correctes d’une image ?

Les rapports hérités GTMetrix vous indiquent les dimensions correctes de chaque image lorsque vous développez l’élément dans l’onglet Vitesse de page.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.