Les avantages d’avoir des images sur votre site

Il y a eu de nombreuses études sur les avantages des images sur les pages Web.

Voici celle que j’ai retenue :

Les pages avec au moins une image ont un meilleur rendement en recherche organique que les pages sans images.

(Source: Backlinko.com)

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Pour donner l’envie de lire vos contenus, les avantages des images sont évidents. Cependant, si vos images ne sont pas bien optimisées, elles peuvent ajouter plusieurs mégaoctets à vos tailles de chargement de page. Cela va être extrêmement préjudiciable à la performance de votre site. Et cela va même non seulement vous faire descendre dans les classements de Google mais aussi donner une expérience frustrante à vos lecteurs.

Je me suis tournée vers Laurent et voilà ce qu’il m’a dit :

Le côté positif avec l’optimisation d’image est que c’est très simple à faire. Tu as passé du temps ces dernières semaines à optimiser les images de ton site. Tu devrais écrire un guide complet sur ce thème. Son l’objectif serait que tout patron d’un petite entreprise puisse être en mesure d’optimiser les images pour obtenir un meilleur référencement naturel pour son site.

Je me suis mise immédiatement au travail et voici les 8 chapitres de l’optimisation d’image abordés dans cet article :

  1. Les Sources – 3 sites où vous pouvez trouver des millions d’images gratuitement
  2. Le format – Choisir entre JPEG, GIF ou PNG ?
  3. La résolution – Utiliser des images avec les mêmes dimensions avec lesquelles elles s’affichent
  4. La taille – Compresser vos images pour un chargement plus rapide
  5. Le Nom – Utiliser des noms de fichiers descriptifs
  6. Alt text et titre – Noter de les renseigner
  7. La sitemap – Augmenter les chances que vos images soient référencées
  8. Social Media – Tirer le meilleur parti de vos images sur les médias sociaux

Plus une astuce en bonus si un jour vous migrez de thème !

Trouver des images

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Même si il est préférable de créer vos propres images, prendre vos propres photos pour illustrer un contenu n’est pas toujours une option réalisable, essentiellement pour des contraintes de temps ou de ressources limitées.

Heureusement, il y a des tonnes de sites disponibles sur le Web avec des millions d’images libres de droit.

Voici les sites que j’utilise le plus souvent pour trouver mes images :

  1. Pixabay.com
  2. Flickr.com
  3. 500px.com

S’ils ne vous suffisent pas, vous pouvez aussi piocher dans ma liste de 18 sites où vous pouvez obtenir des images libres de droit.

En plus de belles photos, votre contenu peut nécessiter aussi des captures d’écran. Dans ce cas, vous devriez toujours passer un peu de temps pour créer les vôtres.

La plupart des captures d’écran sur mon site sont créées avec la touche impression d’écran de mon clavier puis travaillées avec MS Paint. Et oui, vous n’avez pas besoin de compétences sur Photoshop pour faire de l’édition d’images simples.

Quel format de fichier image devez-vous utiliser ?

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Il existe de nombreux types de fichiers image avec leurs avantages et leurs inconvénients que j’ai déjà décrits ici. Nous allons nous concentrer sur les trois types de fichiers les plus courants : JPEG, GIF et PNG.

JPEG

Avec les images JPEG (Joint Photographic Experts Group), il y a un compromis à trouver entre la taille du fichier et la qualité de l’image.

Le niveau de compression doit être ajusté pour trouver le juste équilibre entre la taille du fichier et la qualité de l’image.

Les fonds transparents ne sont pas pris en charge, donc JPEG n’est généralement pas une option appropriée pour les logos de site Web.

JPEG est, par contre, la meilleure option pour les images photographiques haute couleur.

GIF

GIF signifie Graphics Interchange Format. Il prend en charge les animations simples. A noter que le format GIF ne prend en charge que 256 couleurs du spectre RVB par image. Par contre, chaque image peut utiliser 256 couleurs différentes.

GIF prend en charge les fonds transparents. C’est donc une option appropriée pour les logos et autres éléments de page, comme les boutons.

Les fichiers GIF sont évidemment bien adaptés aux images animées. Les restrictions de couleur dans les images GIF les rendent impropres à des images photographiques à haute couleur.

Attention : la taille des fichiers GIF animés est souvent importante. Je vous conseille de regarder cette taille avant de les utiliser sur votre site.

PNG

PNG signifie Portable Network Graphics. Le PNG prend en charge la compression de données sans perte et a été conçu pour remplacer le format GIF.

Le format PNG prend en charge la transparence et une large gamme de couleurs, comme le JPEG.

Le PNG offre une qualité d’image incomparable pour les images simples par rapport au format JPEG. Mais leur taille de fichier sera beaucoup plus grande pour les images photographiques en couleur.

WhoIsHostingThis.com a publié une infographie sur le sujet dont je vous ai extrait l’image ci-dessous :

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Ma recommandation : Utiliser principalement le format JPEG pour tout ce qui est photos, des images au format PNG pour les logos transparents et des images avec peu de couleurs. Utiliser les GIFs animés avec parcimonie à cause du poids des fichiers.

Résolution d’image

La résolution des images influe grandement sur la taille du fichier. Ne jamais oublier qu’il faut avoir une taille des fichiers la plus petite possible pour assurer le chargement des pages le plus rapidement possible.

Par exemple, si votre blog ne peut afficher que des images d’une largeur maximale de 720px, il est inutile d’utiliser des images de 2000px de large. L’image 2000px sera automatiquement redimensionnée pour s’adapter au conteneur de 720px, mais la taille de l’image sera conservée.

Hors, la différence de taille de fichier entre une image de 2000px de large et une image de 720px peut être de plus de 1 Mo !

Voir l’exemple dans l’image ci-dessous. Si vous avez besoin d’une image de 250x250px, n’utilisez pas une image plus grande (par exemple 500x500px), créez une image de la taille exacte dont vous avez besoin c’est-à-dire de 250x250px. Cela vous aidera à garder votre taille de page le plus faible possible, et cela aidera vos pages à se charger le plus rapidement possible.

Ma recommandation : Connaître la résolution nécessaire au thème de votre site et travailler vos images pour qu’elles soient exactement de cette taille. Cela va réduire la taille des pages et donc vos pages s’affichent plus rapidement sans perdre en qualité.

Réduire la taille du fichier image

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Une fois que vous avez mis vos images à la bonne résolution requise par votre thème, vous allez chercher à éliminer tout kilo-octet superflu sans sacrifier la qualité de l’image.

Bien qu’il existe d’excellents plugins WordPress qui aident à réduire les tailles d’image, je suis convaincue que les images doivent être bien optimisées avant de les télécharger. Une fois que vous les avez optimisées avant de les uploader dans votre CMS, les extensions WordPress (ou autres CMS) peuvent vous aider à les compresser davantage sans perdre en qualité d’image.

La plupart des extensions proposent un curseur en pourcentage sur la qualité. Imaginons une image avec une taille de 100ko et une qualité de 100. Il est fort probable que la taille puisse descendre à 30ko avec une qualité positionnée à 70 et ceci sans aucune dégradation visible à l’œil nu.

Généralement, pour des images JPEG, le réglage de la qualité entre 70 et 85 assure une qualité d’image correcte tout en réduisant significativement la taille du fichier de sortie. Par contre, en-dessous de 70, il y a généralement une perte plus sensible de la qualité de l’image.

Pour ma part, je confiais ce travail à l’extension WP Smush.

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

WP Smush est très facile à utiliser. Vous serez surpris de voir combien de kilo-octets il peut vous faire gagner sans aucune perte de qualité. J’ai gagné environ un tiers, ce qui représente quand même presque 100Mo.

La version gratuite limite les compressions en paquet de 50 images à la fois. Ce qui est largement suffisant pour les petits sites. Mais cela pourrait vous prendre un certain temps si vous avez des milliers d’images dans votre médiathèque. Dernièrement, WP Smush a ajouté la possibilité de convertir des images au format PNG en JPEG dès qu’il pense que vous avez peut-être choisi le mauvais type de fichier. Cette fonctionnalité réduit aussi vos fichiers d’image.

Et les images sont automatiquement “smushed” lors du téléchargement.

La version payante de WP Smush – que j’utilisais – réduit encore plus vos images pour obtenir une taille de fichier encore plus petite. Accessoirement, elle supprime aussi la limite de la compression en paquet. Vous pouvez donc compresser toutes vos images en un clic quelque soit leur nombre.

Globalement, WP Smush est un plugin d’optimisation d’image idéal pour les débutants ou si vous avez peu de temps à consacrer à l’optimisation des images.

Aujourd’hui j’utilise Imagify

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

J’ai migré vers imagify. En effet, l’optimisation des images est aussi puissante que celle de WP Smush et quelque fois même meilleure. Mais surtout imagify est gratuit jusqu’à 25 Mo par mois ce qui est largement suffisant pour mon site.

Autres solutions

WP Smush n’est pas la seule extension possible. Mathieu m’a aussi parlé de EWWW Image Optimizer et de Imsanity que je ne vais couvrir ici puisque je ne les utilise pas.

Si votre site Web n’est pas sur WordPress ou si vous ne voulez pas installer d’extensions, il existe aussi un certain nombre d’outils gratuits de compression en ligne.

Voici par exemple deux sites Web que vous pouvez utiliser pour compresser vos images :

  1. TinyPNG.com – pour compresser les images PNG et JPEG
  2. CompressJPEG.com – pour compresser les images JEPG

Ma recommandation : Réduire la taille des fichiers d’image avant de les télécharger sur WordPress. Puis utiliser une extension comme WP Smush sur WordPress pour réduire encore la taille des fichiers.

Utiliser des noms de fichiers descriptifs

Nommer correctement les fichiers des images est extrêmement facile à faire, mais c’est un aspect qui est souvent négligé.

Dans ses recommandations, Google vous demande de fournir autant d’informations que possible sur une image, et il insiste particulièrement sur le nom du fichier.

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Par exemple, un nom de l’image ci-dessus comme chiot-carlin-mignon.jpg est plus descriptif que IMG003324.jpg. Ainsi, Google classe mieux vos images dans ses pages de résultats.

Néanmoins, le nommage de tous les fichiers d’image peut rapidement devenir fastidieux. Pour ma part, j’utilise l’extension “Media File Renamer” que j’ai paramétrée de façon à ce que les noms des fichiers images prennent le nom du titre de l’article dans lequel elles sont présentes.

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Ma recommandation : assurez-vous que les noms de fichiers d’image soient bien une description textuelle de l’image.

Renseigner le texte alternatif et le titre de vos images

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Texte alternatif

Le Texte Alternatif (ou Alt Text) est l’un des éléments les plus importants dans l’optimisation de vos images.

Le Alt Text fournit aux moteurs de recherche un moyen de mieux comprendre vos images. Google le considère comme un facteur important dans la recherche d’images.

Le Alt Text sera aussi affiché sur la page si, pour une raison quelconque, votre image ne parvient pas à charger. Il est également utilisé par les lecteurs d’écran pour les malvoyants.

J’essaie toujours de rajouter, dans mes champs Alt Text, une variation du mot-clé principal de la page. Si vos images sont pertinentes par rapport à votre contenu, une description de l’image devrait naturellement inclure des mots clés connexes.

Un dernier point à souligner est que Internet Explorer utilise le Alt Text comme une info-bulle lorsque votre souris survole une image. Par contre, d’autres navigateurs, comme Chrome, utilisent le Titre de l’image comme info-bulle.

Texte du titre

Le texte du titre n’est pas a priori un facteur de classement pour la recherche d’image. Il n’est pas considéré non plus comme un aspect important de l’optimisation d’image.

Bien que cela n’améliore pas la qualité SEO de votre page ou de vos images, il peut être un moyen de fournir plus d’informations aux utilisateurs. Car la plupart des navigateurs modernes utilisent le texte du titre comme info-bulle lorsqu’ils survolent une image.

Remarque :

  • Mettre le même texte dans le champ Alt Text et le Titre est tout à fait convenable.
  • Utiliser des espaces normaux dans vos champs Alt Text et le titre, et non pas des tirets « – » ou des underscores « _ ».

Ma recommandation : Renseigner les champs Alt Text dans toutes les images. 2 à 6 mots fournissent habituellement une description suffisante.

Site Map

Bien que n’étant pas aussi important que d’autres aspects de l’image SEO, n’oubliez pas d’inclure des images dans vos sitemaps XML pour augmenter les chances de vos images d’être trouvées dans Google Images.

Les images peuvent être référencées manuellement à l’aide des balises “image:image” et “image:loc” dans votre sitemap XML.

La bonne nouvelle est que, si comme moi vous utilisez l’extension WordPress, Yoast, les images sont automatiquement ajoutées à votre sitemap XML.

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Donc vous n’avez rien à faire !

Ma recommandation : utiliser le plugin WordPress Yoast qui ajoute automatiquement vos images à votre sitemap XML et la soumettre dans Google Search Console.

Média sociaux

Les balises meta OG (Open Graph) (utilisées par Facebook et Pinterest) et les Twitter Cards précisent des informations importantes pour les plateformes de médias sociaux. L’une des choses les plus importantes à spécifier est l’image que vous souhaitez afficher lorsque quelqu’un partage votre contenu.

Pourquoi l’image est-elle importante ?

Une bonne image de haute qualité peut avoir un impact positif sur le taux de clics sur les plates-formes sociales, tandis qu’une mauvaise image de mauvaise qualité peut avoir un impact négatif.

Vous voulez évidemment que le plus de personnes possible cliquent sur les partages et atterrissent sur votre site, alors assurez-vous de préciser l’image que vous voulez que les gens voient.

Vous pouvez le faire en ajoutant manuellement les balises META OG à la section de la tête de votre page.

Là encore, les plugins SEO (comme Yoast) prennent automatiquement soin d’ajouter ces balises à vos pages.

Yoast va choisir l’image à mettre en “vedette” lors des partages. Mais, vous pouvez facilement sélectionner votre propre image en cliquant sur l’icône ‘partager’ dans le menu côté Yoast. Cela affichera les options de partage de Facebook pour cette page. La taille d’image recommandée pour le partage sur Facebook est de 1200×630px.

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Cliquez sur l’icône Twitter pour afficher les options Twitter et sélectionnez de la même manière votre image de la carte Twitter.  La taille d’image recommandée pour le partage sur Twitter est de 1024×512px.

A noter dans cette fenêtre que vous pouvez également spécifier le titre et la description lors des partages vers Facebook et Twitter si vous souhaitez qu’ils soient différents de votre méta-titre et méta-description.

Précision pour Pinterest : Même si j’en parle peu, j’aime bien aussi Pinterest. Pinterest utilise le Alt Text, vu précédemment, comme description de votre image lorsque quelqu’un l’épingle. Ceci est important à savoir si vous voulez que vos images se positionnent bien dans la recherche sur Pinterest, qui peut être une source étonnante de trafic.

Bonus : comment régénérer vos vignettes dans WordPress

Le Guide Complet Pour Optimiser Vos Images Sur WordPress - Contenu

Si un jour vous changez de template de site que ce soit :

il est fort à parier que la taille des images nécessaires au template soit différente.

Et voilà ce qui va se passer !

Les nouvelles images qui sont téléchargées après avoir activé le nouveau thème sont correctes. Par contre, toutes les anciennes vignettes s’affichent avec une qualité très moyenne voire vont apparaître déformées.

Vous allez essayer d’ajuster les tailles d’image dans “Réglages >> Média” depuis votre console d’administration WordPress, mais cela ne va pas résoudre le problème.

En effet, par défaut, lorsque vous téléchargez une image vers WordPress, elle crée des tailles différentes en accord avec votre thème et les enregistre dans le dossier de téléchargement.

De nombreux thèmes WordPress profitent de cette fonctionnalité et définissent de nouvelles tailles d’image. Mais le problème est que ces nouvelles tailles d’image ne sont appliquées qu’aux images que vous téléchargez après l’activation du thème.

Pour résoudre ce problème, vous devez générer de nouvelles tailles pour toutes les images téléchargées précédemment. Il faut donc « régénérer vos miniatures » (ou Regenerate Thumbnails en anglais).

Il existe une extension WordPress qui fait cela très bien : c’est “Regenerate Thumbnails”. Cela dépend du nombre d’images que vous avez, mais le traitement peut être un peu long. Mais cette extension fait le job ! Tout rentre dans l’ordre une fois que “Regenerate Thumbnails” est passé sur toutes vos images.

Résumé pour optimiser vos images

L’optimisation d’image n’est pas difficile. Prendre le temps de mettre en ordre vos images mal ou non optimisées et veiller à ce que les nouvelles images soient bien optimisées, peut aider à améliorer votre classement dans les moteurs de recherche et à aider vos pages à se charger plus rapidement.

Cela signifie donc plus de trafic vers le site Web de votre PME ou TPE et une meilleure expérience pour vos utilisateurs.

Avez-vous d’autres conseils pour l’optimisation des images? Vous avez des questions sur l’optimisation d’image? Laisser un commentaire ci-dessous.


Also published on Medium.