Les images jouent un rôle important dans le référencement naturel. C’est un secret de polichinelle, Google aime le contenu de qualité et les images y contribuent. Toute introduction au SEO mentionne l’importance de renseigner une description alternative pour chaque balise image. Cela a certes une importance, mais c’est loin d’être la seule astuce pour optimiser ses images pour le SEO. Nous vous parlons ici de HTML, de formats d’images et d’outils pour avoir un site beau, rapide et attractif pour votre cible comme pour les moteurs de recherche. C’est parti !
Comment les images impactent votre SEO
Comme toujours en référencement naturel, les algorithmes des moteurs de recherche, et tout particulièrement de Google, restent largement secrets. Impossible donc d’affirmer avec force et conviction le poids exact des images dans le ranking d’une page web. Cependant, plusieurs études visent à montrer que la présence d’au moins une image au sein du contenu d’une page est un incontournable pour figurer dans le top 10 des pages de résultats des moteurs de recherche, ou SERP (pour Search engine result pages).
Cela n’a rien d’étonnant puisque l’on sait sans place au doute que Google aime le contenu de qualité, c’est-à-dire répondant précisément aux questions que se posent les internautes. Les images aidant à apporter une réponse complète et facile à identifier. Elles sont donc logiquement plébiscitées par les robots.
En donnant de la vie à une page et permettant de comprendre en un coup d’œil ce que de longs paragraphes peineraient à faire, les images améliorent l’expérience utilisateur (UX), un incontournable de la génération de trafic et du succès d’une stratégie SEO. Pour cela, encore faut-il user d’images apportant une plus-value et correctement optimisées pour pouvoir en tirer le meilleur parti.
En parallèle, les outils de machine learning de Google font des progrès considérables et sont désormais capables d’identifier le contenu d’une image. Cela ne devrait pourtant pas servir d’excuses aux propriétaires de sites Internet qui penseraient pouvoir se passer de l’optimisation technique de leurs sites, au risque de voir leurs efforts rapidement s’effondrer.
Optimiser ses images pour la sémantique : quelques notions de HTML
La base même de la page web est le HTML (pour HyperText Markup Language). C’est donc à ce niveau qu’il faut débuter l’apprentissage qui mènera à une optimisation parfaite des images de son site Internet. En HTML, les images sont intégrées à l’aide de la balise img. Différents attributs la complètent, permettent de personnaliser l’affichage de l’image en question :
- src : sans source, la balise img n’afficherait rien. Cet attribut obligatoire indique en effet le chemin d’accès à l’image. Il s’agit généralement de l’URL à laquelle se trouve l’image sur le serveur.
- align : l’attribut d’alignement indique où positionner l’image sur la page. Tout comme un texte, elle peut être alignée à gauche, à droite ou centrée.
- alt : l’attribut alt est optionnel et contient un texte alternatif décrivant l’image. Pourtant, en termes de référencement naturel, elle est particulièrement importante. En effet, en décrivant l’image, elle permet aux utilisateurs qui ne peuvent pas l’afficher de comprendre son importance au sein du contenu. Vous avez donc tout intérêt à soigner la rédaction des attributs alt de vos balises img.
- title : le titre d’une image se traduit visuellement par une petite bulle de texte apparaissant au survol d’une image par la souris. Également optionnel, il est bien plus facile de l’ignorer que le texte alternatif.
- width et height : indiquent respectivement la largeur et la hauteur d’une image. Ils permettent avant tout de définir la taille d’une image dans le but de fixer une mise en page.
Ces attributs peuvent être paramétrés en modifiant directement le code source de la page. Cependant, tous les systèmes de gestion de contenu (SGC, ou CMS pour Content management system) proposent un ou plusieurs outils permettant d’éditer l’ensemble des paramètres de manière visuelle, sans avoir à rentrer dans le code.
Optimiser ses images pour la technique
En plus de devoir être capable d’identifier vos images, notamment grâce à un nom de fichier explicite et des attributs alt renseignés, Google a également besoin de s’assurer que leur affichage se fait dans les meilleures conditions techniques. Pour cela, deux points méritent une attention toute particulière : le poids de l’image et leur format.
Format d’image et type d’utilisation : choisir la bonne extension
Il existe de nombreux formats d’image. Ceux qui se sont un jour intéressé au graphisme savent pertinemment qu’il s’agit même de l’un des aspects les plus complexes en tout début d’apprentissage. En plus des formats habituels comme le JPEG, le PNG, le GIF ou le PDF, il existe en plus des formats dits vectoriels comme le SVG. En plus, chaque logiciel propriétaire tend à imposer son propre format. Les fichiers Photoshop s’enregistrent donc en PSD, les fichiers InDesign en INDD et ceux créés sous Illustrator en AI.
Heureusement, tous ces formats ne sont pas couramment utilisés pour l’affichage web, qui se concentre plutôt sur l’export de la plupart de ces formats spécifiques. Il vous alors essentiellement vous concentrer sur :
- le JPEG. Le JPEG est un format standard s’il en est. En plus d’être reconnu par la quasi-totalité des navigateurs Internet, il permet en plus une bonne compression, et donc un poids réduit. Il ne permet cependant pas de gérer la transparence.
- le PNG. C’est exactement là la force du PNG, lui aussi standard et gérant en plus les pixels transparents. Il a cependant tendance à prendre plus de place.
- le SVG. Le SVG est un format vectoriel, c’est-à-dire stockant les données sous forme de vecteurs et non sous forme de pixels. En conséquence, les images ainsi créées peuvent être redimensionnées à l’infini sans perte de qualité. Il permet en plus d’être utilisé au sein d’animations en JavaScript. Pourtant, il est un format plus complexe qui a essentiellement un intérêt pour les logos et les graphiques. Une photographie ne peut par exemple pas être au format SVG.
Des images légères pour un site rapide
Un écran d’ordinateur haute définition standard a une résolution de 1920 par 1080 pixels. Une photo prise avec un appareil réflexe 24 mégapixels fait quant à elle 6000x4000 pixels. Il est alors évident qu’insérer une image en taille réelle n’est pas seulement une contrainte pour le chargement des pages d’un site, mais en plus totalement inutile. Cette différence est plus accentuée par le fait qu’une image d’illustration sur une page web n’occupe généralement pas la totalité de l’écran.
La première chose à faire est donc de redimensionner son image à sa dimension utile. La seconde est de prendre en compte sa résolution. Cette mesure s’exprime en pixels par pouce (ppp). Pour l’impression, on estime que 300ppp est une valeur correcte. Pourtant, le web ne demande pas un tel niveau de détail. En effet, la résolution standard d’un écran de 72ppp, de quoi largement réduire le poids de vos images.
Il est possible de faire ces modifications manuellement, grâce à un logiciel de traitement d’images comme Photoshop ou Gimp, qui a l’avantage d’être gratuit tout en étant relativement complet. Il existe enfin des outils en ligne qui permettent de faciliter le traitement. Parmi eux, TinyJPG et MozJPEG (par Mozilla), sont certainement quelques-uns des plus populaires.
Avant de presser le bouton « publier » de votre CMS préféré, n’oubliez donc plus d’au moins :
- Choisir une résolution appropriée aux écrans : 800x400 pixels, en 72ppp, par exemple.
- Nommer ses images de façon appropriée : avec des mots-clés explicites, mais pas forcés, du type image-optimisee-seo.jpg.
- Exporter ses images dans un format adapté (JPG pour une photo, PNG pour un logo).
- Renseigner l’attribut alt text.