Les images, entre poids et compréhension

Une image transporte du sens qu'un moteur ne lit pas directement. Tout ce qui suit consiste à lui donner ce sens par du texte, et à ne pas ruiner la performance au passage.

Le texte alternatif

L'attribut alt décrit ce que montre l'image, pour quelqu'un qui ne la voit pas. C'est une obligation d'accessibilité avant d'être un sujet de référencement, et les deux logiques pointent dans la même direction.

Une bonne description dit ce qu'on voit : « Tableau de bord d'analyse affichant deux courbes divergentes sur douze mois ». Pas « graphique seo analyse trafic référencement naturel ».

Une image purement décorative prend un alt vide, alt="", qui indique aux lecteurs d'écran de la sauter. C'est correct et souhaitable ; c'est l'absence d'attribut qui pose problème.

Le nom de fichier et le contexte

Le nom du fichier compte un peu. tableau-de-bord-search-console.jpg vaut mieux que IMG_4821.jpg, et cela ne coûte rien de le faire au moment du dépôt.

Le contexte compte davantage. Le texte qui entoure l'image, sa légende, le titre de la section : c'est de là que le moteur tire l'essentiel de sa compréhension. Une image placée au milieu d'un paragraphe qui la commente est mieux comprise que la même image isolée en haut de page.

Le poids, et les formats

Les formats modernes divisent le poids par deux à quatre à qualité perçue égale. AVIF le plus efficace, WebP le mieux supporté, JPEG en dernier recours. La balise <picture> permet de proposer les trois et laisse le navigateur choisir.

Les dimensions doivent correspondre à l'affichage réel. Servir une image de 3 000 pixels de large dans un emplacement de 600 est le gaspillage le plus courant, et le plus facile à corriger.

Le srcset permet de proposer plusieurs largeurs et de laisser le navigateur prendre celle qui convient à l'écran. Deux ou trois largeurs suffisent dans la plupart des cas.

Les deux attributs qu'on oublie

width et height déclarés dans le HTML permettent au navigateur de réserver l'espace avant le chargement. Sans eux, le contenu saute quand l'image arrive, ce qui dégrade directement le CLS décrit dans le chapitre sur les Core Web Vitals.

loading="lazy" diffère le chargement des images hors écran. À ne pas mettre sur l'image principale, qui doit au contraire être chargée en priorité.

La recherche par image

Les images se classent dans un index distinct et amènent un trafic réel sur certains secteurs : cuisine, décoration, mode, bricolage, tourisme.

Trois conditions pour y prétendre. L'image doit être indexable, donc pas bloquée par le robots.txt et pas chargée uniquement par script. Elle doit être de bonne qualité et originale. Et elle doit figurer dans une page dont le contenu correspond à la recherche.

Un plan de site dédié aux images existe et reste utile sur les sites où les visuels portent une partie de la valeur.

Ce qui ne sert à rien

Empiler des mots-clés dans le alt. Cela dégrade l'accessibilité et n'a plus d'effet de classement depuis longtemps.

Nommer toutes les images avec la même expression. Cent fichiers agence-seo-bordeaux-1.jpg à -100.jpg forment un schéma reconnu.

Ajouter un texte caché derrière l'image. C'est une infraction, traitée dans le chapitre sur ce que Google sanctionne.