Le SEO des images

Sur une boutique en ligne, la photo produit, c'est le contenu. Un catalogue peut porter des milliers d'images, et chacune est à la fois un signal de pertinence et un poids sur la page. Bien traitées, les images ramènent du trafic via Google Images, renforcent une fiche produit et la gardent rapide. Mal traitées, elles deviennent la première cause de lenteur et de recul dans les résultats. Le SEO des images n'est pas une couche ajoutée après coup : c'est un petit problème d'optimisation que l'on résout de la même façon sur chaque référence.

Un texte alt qui décrit, sans bourrer

L'attribut alt sert d'abord à l'accessibilité : c'est ce qu'annonce un lecteur d'écran et ce qui s'affiche si l'image ne charge pas. Google le lit comme l'un des indices principaux du contenu de l'image, d'où son rôle pour le classement dans Google Images. Rédigez-le comme vous décririez la photo à quelqu'un qui ne la voit pas, en langage naturel, en intégrant les attributs qu'un acheteur chercherait vraiment.

• Décrivez le produit concrètement : bottine Chelsea cuir bleu marine, vue de côté vaut mieux que bottine ou IMG_2043.
• Intégrez couleur, matière et modèle sans répéter cinq fois le mot-clé.
• Laissez l'alt vide (alt="") sur les images purement décoratives pour que les technologies d'assistance les ignorent.
• N'ouvrez pas chaque alt par "photo de" ou "image de" — ça n'apporte rien.

Le nom de fichier porte du sens, lui aussi

Les moteurs lisent le nom de fichier avant même de voir les pixels. bottine-chelsea-cuir-marine.webp dit quelque chose à Google ; DSC_0098.jpg ne dit rien. Renommez à l'export, séparez les mots par des tirets, gardez tout en minuscules et évitez espaces et accents, qui se retrouvent encodés dans l'URL.

Formats et compression : WebP et AVIF

La plupart des catalogues livrent encore des JPEG et PNG surdimensionnés. Les formats modernes font le même travail pour une fraction du poids. Le WebP est supporté par tous les navigateurs récents et réduit en général le poids d'un quart à un tiers face à un JPEG équivalent ; l'AVIF compresse encore plus, mais s'encode plus lentement et demande un fallback pour quelques appareils anciens. La règle pratique : servez de l'AVIF ou du WebP avec un JPEG en repli, et ne livrez jamais un PNG pour une photo — réservez le PNG aux logos et aplats avec transparence.

• Compressez vers une cible visuellement sans perte (qualité 75–85 environ) plutôt qu'au maximum.
• Exportez à la taille d'affichage réelle — un master de 3000px pour un emplacement de 600px, c'est de la bande passante gâchée.
• Utilisez l'élément <picture> ou l'API image de votre plateforme pour négocier le meilleur format par navigateur.

Dimensions, srcset et décalage de mise en page

Indiquez toujours des attributs width et height explicites (ou un aspect-ratio en CSS) sur chaque image. Sans eux, le navigateur ne réserve pas l'espace, le contenu saute à mesure que les images arrivent, et vous échouez au Cumulative Layout Shift — l'un des Core Web Vitals que Google mesure. Servez-vous ensuite de srcset et sizes pour donner à chaque appareil un fichier à la bonne taille : un mobile ne doit jamais télécharger le hero desktop. C'est le levier image le plus rentable pour la vitesse de la page.

Lazy-loading, sans casser la ligne de flottaison

Ajoutez loading="lazy" aux images sous la ligne de flottaison pour que le navigateur les diffère jusqu'au scroll. Faites l'inverse pour l'image qui compte le plus au chargement — la photo produit principale ou le hero. Marquez-la fetchpriority="high" et ne la passez jamais en lazy, sous peine de ralentir votre Largest Contentful Paint. Sur une fiche produit, l'image principale charge en priorité tandis que les vignettes de la galerie et les produits associés chargent en lazy.

Une checklist catalogue répétable

• Un alt descriptif et unique sur chaque image utile ; alt vide sur les décoratives.
• Des noms de fichiers lisibles, en minuscules, séparés par des tirets, définis à l'export.
• AVIF ou WebP avec fallback ; aucune photo en PNG ; qualité réglée, pas poussée au max.
• Width et height explicites sur chaque image ; srcset et sizes responsives.
• Chargement prioritaire de l'image LCP ; lazy pour tout ce qui est sous la ligne de flottaison.
• Listez les images produits dans un sitemap images pour que Google les découvre.

Rien d'exotique ici : c'est de la rigueur appliquée à chaque référence. Quand nous auditons les fiches produits d'une boutique de Floride, les images sont souvent là où se cachent les gains les plus rapides : des pages plus légères, de meilleurs Core Web Vitals et un second flux de visiteurs arrivant droit de Google Images.