Le guide complet pour optimiser vos images sur WordPress

Quels sont les avantages à insérer des images sur le site Web de votre entreprise ?

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)

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 :

Optimiser les images présentes sur votre site Web est très simple à faire. Tout chef d’entreprise doit ê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 gratuites et libres de droit

Même s’il est toujours préférable de shooter vos propres images, prendre vos propres photos pour illustrer un contenu n’est pas toujours réalisable, que cela soit pour des contraintes de temps ou de ressources.

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

Voici les 3 sites d’images que j’utilise le plus souvent pour trouver des images de qualité :

1. Pixabay.com
2. Pexels.com
3. stockvault.net

S’ils ne vous suffisent pas, allez piocher dans ma liste de 18 sites où vous pouvez trouver 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 d’image utiliser ?

Après la qualité de l’image vient le choix du format de fichier.

Il existe de nombreux types de fichiers image avec leurs avantages et leurs inconvénients.

Je vais me concentrer sur les 3 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, sans aucun doute, la meilleure option pour les images photographiques haute en couleur.

GIF

GIF signifie Graphics Interchange Format.

Les fichiers GIF sont évidemment bien adaptés aux images animées.

La contrainte : le format GIF ne prend en charge que 256 couleurs du spectre RVB. Cette restriction rend le format GIF impropre pour des images photographiques haute en couleur.

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.

Attention : la taille des fichiers GIF animés est souvent importante. Je vous conseille de consulter 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 de qualité. Il a été imaginé 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 a publié une infographie sur le sujet dont je vous ai extrait l’image ci-dessous :

Mes recommandations :

• Utiliser le format JPEG pour vos photos,
• Privilégier le 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.

Quelle résolution d’image retenir ?

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 site Web affiche des images d’une largeur maximale de 720 px, il est inutile d’utiliser des images de 2000 px de large.

L’image 2000 px va être automatiquement redimensionnée pour s’adapter au conteneur de 720 px, 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 720 px peut être de plus de 1 Mo !

De même, si vous avez besoin d’une image de 250 x 250 px, n’utilisez pas une image plus grande (par exemple 500x500px), créez une image avec la taille exacte dont vous avez besoin c’est-à-dire de 250 x 250 px.

Ainsi, vous minimisez la taille de la page, et donc le temps de chargement de votre page est plus rapide pour vos visiteurs.

Mon conseil : 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 le poids des images avec imagify

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

Bien qu’il existe d’excellentes extensions WordPress qui compressent la taille des images, 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) les compressent 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 100 ko et une qualité de 100. Il est fort probable que la taille puisse descendre à 30 ko 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.

Avant je confiais ce travail à l’extension WP Smush.

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 100 Mo.

La version gratuite limite les compressions en paquet de 50 images à la fois, ce qui est largement suffisant pour les petits sites.

Mais cela va 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

J’ai migré vers imagify.

En effet, l’optimisation des images est aussi puissante voire meilleure que celle de WP Smush.

Mais surtout imagify est un outil gratuit jusqu’à 25 Mo par mois ce qui est largement suffisant pour la plupart des sites Web.

Autres solutions

Imagify et WP Smush ne sont pas les seules extensions disponibles. Laurent 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 2 sites Web 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 Imagify sur WordPress pour réduire encore la taille des fichiers. C’est indispensable pour conserver une vitesse de chargement de vos pages convenable pour vos utilisateurs.

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. Il insiste particulièrement sur le nom du fichier.

Par exemple, pour l’image ci-dessus un nom de fichier 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, nommer tous les fichiers d’image devient rapidement fastidieux.

Mon astuce : j’utilise l’extension “Media File Renamer”. Je l’ai paramétrée de façon à ce que les noms des fichiers images reprennent le nom du titre de l’article dans lequel elles sont présentes.

Mon conseil : 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

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 comprendre vos images. Pour Google, c’est un facteur important dans la recherche d’images.

Mais ce n’est pas tout.

Le Alt Text s’affiche aussi sur la page si, pour une raison quelconque, votre image ne parvient pas à se charger. Enfin, 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 doit naturellement inclure des mots-clés connexes.

Un dernier point à souligner est qu’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.

Inclure vos images dans votre Sitemap

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.

Donc vous n’avez rien à faire !

Mon conseil : utiliser l’extension WordPress Yoast qui ajoute automatiquement vos images à votre sitemap XML et la soumettre dans Google Search Console.

Des images pour vos publications sur les réseaux sociaux

N’oubliez pas de définir quelle image que vous souhaitez afficher lorsque quelqu’un partage votre contenu sur les réseaux sociaux.

Pourquoi l’image est-elle importante sur les réseaux sociaux ?

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

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

Optimiser vos balises Meta OG

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

Les balises meta OG (Open Graph) (utilisées par Facebook et Pinterest) et les Twitter Cards précisent des informations importantes de vos contenus pour les plateformes de médias sociaux.

Là encore, l’extension Yoast SEO prend le soin d’ajouter automatiquement 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 × 630 px.

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 × 512 px.

Note : c’est dans cette fenêtre que vous spécifiez 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

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

• Pour donner un look plus moderne à votre site,
• Ou bien pour migrer vers un design responsive compatible avec tout format d’écrans,

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.

FAQ  – 3 questions courantes sur l’optimisation des images pour le SEO

Qu’est-ce que le référencement d’images ?

Le référencement d’image fait référence aux pratiques consistant à optimiser vos images pour les moteurs de recherche comme un texte alternatif spécifique, des légendes appropriées, de bonnes dimensions...

Pourquoi le référencement des images est-il important ?

Le référencement des images impacte entre autres la façon dont vos images sont classées dans les images Google. En plus, cela impacte globalement le potentiel de recherche organique. L’optimisation de vos images pour les moteurs de recherche a également un impact positif sur le classement de votre page. Enfin, les images peuvent être aussi affichées dans les résultats de recherche.

Comment optimiser vos images pour le référencement ?

Les 8 conseils pratiques sont : utiliser des images libres de droit (sur stockvault par exemple), privilégier le format JPEG sauf pour les logos avec fond transparent (png), retailler les images au bon format pour votre thème avant de les uploader, nommer le fichier des images de façon qu’il soit compréhensible par un être humain, compresser la taille des images avec l’extension imagify, renseigner le texte alternatif et le titre de vos images, vérifier que vos images sont bien incluses dans votre sitemap, paramétrer le partage des images sur les réseaux sociaux.

Ma check-list « Optimisation des images » en infographie

Résumé pour optimiser vos images pour le Web

Prenez le temps de mettre de l’ordre dans vos images.

Optimiser vos images n’est pas difficile.

Cela consiste à :

• Rendre leur poids le plus faible possible sans dégrader la qualité pour accélérer le temps de chargement de vos pages,
• Puis, renseigner tous les champs descriptifs (titre, alt text, nom de fichier…) pour optimiser leur référencement dans les moteurs de recherche.

Veillez à ce que vos nouvelles images soient toujours bien optimisées.

Vous améliorez facilement votre classement dans les moteurs de recherche.

Et comme vos pages se chargent plus rapidement, vous diminuez aussi votre taux de rebond.

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

Optimiser vos images est nécessaire, mais pas suffisant.

Ensuite, passez en revue aussi les autres consignes du référencement sur vos pages pour propulser votre contenu web en haut des pages de résultats des moteurs de recherche comme Google.

Avez-vous d’autres conseils pour l’optimisation des images ?