SEO des images : alt, formats, chargement différé, taille

Réencoder nos photos en WebP et les servir en plusieurs largeurs a fait passer l’image de la page d’accueil de 123 Ko à 51 Ko, et celle de la page À propos de 173 Ko à 86 Ko. Le visiteur voit la même photo ; son navigateur télécharge la moitié des octets, parfois moins. D’après notre expérience, alléger les images est le chantier de vitesse le moins coûteux sur un site de contenu, et les textes alt, les noms de fichier et les dimensions occupent le reste d’un après-midi.

Ce que dit Google sur les images

Les consignes de Google sur les images sont brèves. Il demande des textes alt descriptifs et des noms de fichier descriptifs, ainsi que des images placées dans ou près d’un texte qui leur correspond. Il indexe les images qui sont des éléments <img> standard avec un attribut src, et précise que celles utilisées seulement comme arrière-plan CSS ne sont pas indexées en tant qu’images. Les formats indexés sont BMP, GIF, JPEG, PNG, WebP, SVG et AVIF. Les images adaptatives avec srcset ou <picture> conviennent tant que <img> garde un src de repli, et un sitemap d’images existe en option.

Cette page ne fixe ni poids cible ni chiffre sur l’importance du texte alt. Tout ce que ce guide dit du poids est donc notre mesure et notre recommandation, et nous l’indiquons comme telle. Les règles énoncées par Google sont peu nombreuses, et un petit site peut toutes les satisfaire en une seule passe sur ses gabarits.

Un texte alt utile aux personnes d’abord

Le texte alt existe pour les personnes qui ne voient pas l’image, surtout les utilisateurs de lecteurs d’écran, et Google lit la même propriété pour comprendre le contexte. Une description qui sert le premier groupe sert aussi le second : il n’y a aucun compromis à arbitrer. Les exemples ci-dessous sont inventés pour montrer le principe.

Décrivez le contenu et la fonction en une phrase simple. Ne commencez pas par « image de » ou « photo de » : le lecteur d’écran annonce déjà qu’il s’agit d’une image. Si l’image contient du texte, reprenez ce texte. Pour les images décoratives, gardez l’attribut mais laissez-le vide plutôt que de le supprimer : quand l’attribut est absent, certains lecteurs d’écran lisent le nom du fichier. Notre vérificateur SEO compte séparément les attributs alt absents et les attributs volontairement vides, pour cette raison précise.

Poids et format : ce que nous avons mesuré

À chaque compilation du site, nous convertissons chaque JPEG source en WebP à la qualité 76 et nous en produisons plusieurs largeurs. Les photos d’en-tête des guides en reçoivent quatre, 640, 960, 1280 et 1800 pixels, et le réglage par défaut des autres images en compte trois, 480, 800 et 1200. Voici les poids sur nos propres pages :

La version de 640 pixels de la photo d’un guide, celle que télécharge un téléphone, pèse 23 Ko, contre 94 Ko pour celle de 1800 pixels. C’est la part de l’économie que l’on oublie : l’encodage et le redimensionnement divisent à peu près par deux le gros fichier, et les variantes de largeur évitent à un téléphone de le télécharger. Un téléphone qui affiche une photo d’environ 400 pixels CSS de large n’a aucun besoin du fichier de 1800 pixels.

Tous les grands navigateurs actuels prennent en charge le WebP : nous ne livrons donc pas de JPEG de repli. Si vous voulez aussi de l’AVIF, imbriquez-le dans un <picture> avec le repli dans <img>, comme ci-dessous. Quel que soit le format, vérifiez le résultat à l’œil à la taille d’affichage : la qualité 76 est notre choix pour les photographies, pas un réglage universel.

Le balisage à copier

L’image principale d’une page est souvent le plus grand élément à l’écran, elle reçoit donc un traitement différent de celles qui se trouvent plus bas. L’extrait ci-dessous est le schéma que nous utilisons : des dimensions qui permettent au navigateur de réserver la place, plusieurs largeurs, une indication sizes, et une indication de priorité à la place du chargement différé.

<!-- Image principale : probablement l'élément du Largest Contentful Paint, donc pas de chargement différé -->
<img
  src="/img/header-960.webp"
  srcset="/img/header-640.webp 640w,
          /img/header-960.webp 960w,
          /img/header-1280.webp 1280w,
          /img/header-1800.webp 1800w"
  sizes="(min-width: 1200px) 1116px, 94vw"
  width="1800" height="1013"
  alt="Un appareil photo et sa bandoulière posés sur un fond blanc"
  fetchpriority="high">

<!-- Image plus bas dans la page : chargement différé et asynchrone -->
<img
  src="/img/chart-800.webp"
  srcset="/img/chart-480.webp 480w, /img/chart-800.webp 800w"
  sizes="(min-width: 800px) 720px, 92vw"
  width="800" height="450"
  alt="Histogramme : LCP de la page d'accueil à 1 605 ms pour un seuil de 2 500 ms"
  loading="lazy" decoding="async">

<!-- AVIF facultatif avec repli ; l'img garde son src -->
<picture>
  <source srcset="/img/photo-960.avif" type="image/avif">
  <img src="/img/photo-960.webp" width="960" height="540" alt="Décrivez la photo ici" loading="lazy">
</picture>

img { max-width: 100%; height: auto; }

Les attributs width et height permettent au navigateur de calculer le rapport largeur/hauteur avant l’arrivée du fichier et de garder cette place libre : c’est ce qui évite que le texte saute quand l’image se charge. Ce saut est le décalage de mise en page (layout shift), l’un des trois Core Web Vitals, et la règle CSS ci-dessus garde l’image fluide en préservant ce rapport. Notre vérificateur SEO signale les images qui n’ont pas ces deux attributs. sizes doit décrire la largeur réelle d’affichage, sinon le navigateur choisit un fichier plus grand que nécessaire. Le chargement différé est réservé aux images situées sous le premier écran : le mettre sur l’image principale retarde l’élément même sur lequel la page est jugée, et c’est pourquoi celle-ci reçoit fetchpriority="high" à la place. Le guide des Core Web Vitals montre où ces attributs s’insèrent parmi les six leviers qui comptent.

Une passe dans la journée sur un site existant

Inutile de toucher à chaque image pour obtenir l’essentiel du bénéfice. Procédez dans cet ordre et arrêtez-vous quand la liste ne rapporte plus rien.

1. Repérez les images les plus lourdes. Dans les outils de développement du navigateur, ouvrez l’onglet Réseau, filtrez sur Img, rechargez la page et triez par taille. Commencez par le plus gros fichier de votre page la plus visitée.
2. Convertissez et redimensionnez ce fichier. Produisez un WebP à la largeur d’affichage, plus un plus petit pour les téléphones, et vérifiez les deux à l’œil à la taille affichée.
3. Ajoutez width et height à chaque <img>, ainsi que la règle CSS ci-dessus. Cela prend quelques minutes dans un gabarit et supprime, pour tout le site, le décalage de mise en page causé par les images.
4. Passez en revue les attributs alt. La première commande ci-dessous compte les balises <img> d’une page qui n’ont aucun attribut alt, à condition que chaque balise tienne sur une seule ligne de HTML, comme dans une sortie minifiée. Elle compte un alt volontairement vide comme présent, y compris le alt nu que certains minifieurs écrivent. La seconde commande affiche le poids en octets d’une image tel que le serveur l’envoie.

curl -s https://example.com/page/ | grep -o '<img[^>]*>' | grep -vcE '[[:space:]]alt([[:space:]=>/]|$)'
curl -s -o /dev/null -w '%{size_download}\n' https://example.com/img/header-960.webp

5. Passez la page dans un vérificateur. Notre vérificateur SEO rapporte en une seule passe la couverture des alt, le chargement différé, les dimensions explicites, les formats modernes et un échantillon de poids d’images : vous voyez laquelle de ces cinq étapes reste à faire.

Noms, emplacement, crédits et sitemaps

Nommez les fichiers d’après ce qu’ils montrent : resultat-controle-ads-txt.webp en dit plus à un robot comme à un humain que IMG_4032.webp. Placez chaque image à côté du paragraphe qui l’explique, car Google utilise le texte environnant comme contexte. Évitez de cacher du contenu dans des arrière-plans CSS : si une image porte du sens, sa place est dans un <img>.

Les photos de nos guides sont de vraies photographies sous licence libre, créditées sous chaque en-tête à leur photographe, avec un lien vers la page du photographe et vers le site où nous avons trouvé l’image (notre page des crédits les recense). Nous ne les générons jamais. Notre balisage Article pointe aussi vers une image de partage de 1200 par 630 pixels, présentée dans le guide des données structurées.

Nous ne publions pas de sitemap d’images. Nos images sont dans des éléments <img> sur des pages explorables, la voie que Google documente pour les trouver. Si les images sont votre produit, par exemple une photothèque, un sitemap d’images est un ajout raisonnable.