Optimiser ses images pour le SEO : WebP, AVIF, alt text

Les images représentent en moyenne 50% du poids d'une page web. C'est aussi l'un des leviers SEO les plus sous-exploités : Google Images génère des milliards de visites mensuelles, et les signaux liés aux images influencent directement les Core Web Vitals. Optimiser ses images pour le SEO en 2026, ce n'est plus optionnel — c'est une condition de base pour performer.

Ce guide pratique couvre les quatre dimensions essentielles : le choix du format, l'alt text, le lazy loading et les images responsives. Avec des recommandations directement applicables.

La question revient constamment. La réponse a changé en deux ans.

AVIF est désormais le format recommandé pour les photographies. Il offre une compression supérieure à WebP — généralement 30 à 50% plus léger qu'un JPEG équivalent — avec une qualité visuelle identique ou supérieure. Tous les navigateurs modernes le supportent depuis début 2024.

WebP reste la valeur sûre en fallback. Sa compression est meilleure que JPEG et PNG sur la plupart des contenus. Google le recommande officiellement et le supporte nativement dans Chrome depuis longtemps.

JPEG conserve sa place comme format de dernier recours pour les navigateurs anciens — mais ils représentent moins de 2% du trafic mondial en 2026.

La stratégie recommandée :

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description précise de l'image">
</picture>

Cette balise <picture> sert AVIF en priorité, WebP en fallback, JPEG pour les rares navigateurs incompatibles. C'est la solution la plus robuste.

Quel niveau de compression choisir ?

La règle empirique pour les images de contenu éditorial :

• AVIF : qualité 60-75 (rendu excellent, gain de poids maximal)
• WebP : qualité 75-85 (comparable au JPEG 90 en perception)
• Dimensions : ne jamais servir une image plus large que sa taille d'affichage maximale

Pour une image affichée en 800px de large, inutile de servir du 2400px. L'attribut srcset permet de servir la bonne taille selon l'écran.

L'attribut alt est traité à tort comme une formalité. C'est en réalité l'un des signaux les plus directs pour le référencement des images.

Google utilise l'alt text pour deux raisons complémentaires :

1. Comprendre le contenu : les systèmes de vision artificielle de Google ont progressé, mais le texte reste le moyen le plus fiable de communiquer le sujet d'une image
2. Valider la pertinence : l'alt text agit comme un signal de confirmation — si la vision artificielle "voit" un graphique de données et que votre alt dit "graphique évolution du trafic SEO 2024-2026", c'est un signal de cohérence positif

Comment rédiger un alt text efficace

Ce qu'il faut faire :

• Décrire précisément ce qui est visible dans l'image
• Intégrer le mot-clé principal quand c'est naturellement cohérent avec le contenu de l'image
• Être spécifique plutôt que générique : "bagage cabine noir à roulettes avec poignée télescopique" plutôt que "valise"

Ce qu'il faut éviter :

• Commencer par "Image de..." ou "Photo de..." (redondant avec le rôle de la balise)
• Bourrer de mots-clés qui ne décrivent pas l'image réelle
• Laisser le champ vide pour les images de contenu (une image sans alt est invisible pour Google Images)
• Utiliser le nom du fichier comme alt par défaut

Pour les images purement décoratives (séparateurs, fonds), un alt="" vide est correct — cela signale à Google que l'image n'a pas de valeur informationnelle.

Le nom de fichier compte aussi

Google lit le nom de fichier avant même l'alt text. IMG_4521.jpg ne dit rien. graphique-evolution-trafic-organique-2026.webp fournit immédiatement du contexte. Nommez vos fichiers avec des mots-clés en kebab-case, sans accents.

Le lazy loading est le principe de ne charger les images que lorsqu'elles sont sur le point d'entrer dans le viewport de l'utilisateur. L'impact sur les performances initiales est significatif — et les performances initiales influencent directement le LCP (Largest Contentful Paint), l'une des métriques Core Web Vitals.

L'implémentation native en HTML est désormais universellement supportée :

<img src="image.webp" alt="Description" loading="lazy">

Règle critique : ne jamais appliquer loading="lazy" aux images above the fold (visibles dès le chargement de la page, sans scroll). Pour ces images, utilisez loading="eager" ou n'ajoutez pas l'attribut — c'est le comportement par défaut.

L'image de héros, la photo de couverture, le logo en en-tête : ces éléments doivent être chargés immédiatement. Un lazy loading mal appliqué sur ces éléments pénalise directement le LCP.

Notre guide sur les Core Web Vitals 2026 détaille comment mesurer et améliorer chacune de ces métriques.

Servir une image de 2400px à un utilisateur mobile avec un écran de 375px de large, c'est envoyer 10 fois plus de données que nécessaire. Les attributs srcset et sizes résolvent ce problème.

L'attribut srcset

Il liste les différentes versions de l'image disponibles, avec leur largeur respective :

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Description de l'image"
>

Le navigateur choisit automatiquement la version la plus adaptée à l'écran et à la densité de pixels (Retina, etc.).

Checklist pratique pour les images responsives

• Produire au minimum 3 tailles : petite (400-600px), moyenne (800-1000px), grande (1200-1600px)
• Utiliser sizes pour indiquer la taille d'affichage réelle selon les points de rupture
• Pré-générer les variantes lors du build (Next.js Image, Cloudinary, Imgix...)
• Toujours définir width et height explicitement pour éviter le Cumulative Layout Shift (CLS)

Google crawle les URLs des images. Une structure organisée renforce les signaux sémantiques :

• /images/produits/chaussures/basket-running-homme.webp → contexte clair
• /uploads/2023/09/img001.jpg → aucun signal

Organisez vos images par thématique dans l'arborescence. Ce n'est pas un facteur de classement majeur, mais c'est un signal de cohérence parmi d'autres.

L'ajout de données structurées Schema.org peut qualifier vos images pour des rich results visuels dans Google Images. Les types les plus pertinents :

• ImageObject : informations sur l'image (auteur, licence, date)
• Article avec image : qualifie vos articles pour les "Top Stories" avec vignette
• Product avec image : indispensable pour l'e-commerce

Notre guide sur le schema markup et données structurées couvre les implémentations les plus utiles pour le trafic éditorial et e-commerce.

Quelques outils pour vérifier l'efficacité de vos optimisations :

• Google Search Console → Performance → Type de recherche : Images. Suivez les clics et impressions sur vos images.
• PageSpeed Insights : identifie les images non optimisées, les formats à convertir, les lazy loading manquants
• Lighthouse : audit complet incluant les opportunités d'optimisation image
• WebPageTest : visualise le waterfall de chargement pour identifier les images qui bloquent le rendu

Fixez-vous un objectif : toutes vos images de contenu en dessous de 100-150 Ko. Pour les images hero, moins de 200 Ko est raisonnable en AVIF ou WebP haute qualité.

L'optimisation des images est l'un des rares domaines du SEO technique où des gains significatifs sont encore accessibles sans expertise avancée. Passer à AVIF/WebP, soigner les alt text, implémenter correctement le lazy loading et les srcset — ces quatre actions combinées peuvent améliorer à la fois vos Core Web Vitals et votre visibilité dans Google Images.

Le tout sans toucher à une seule ligne de votre stratégie de contenu.

• Best Image Formats for Web 2026 Guide — Image Resizer Pro, comparatif formats
• Alt Text to Supercharge Discoverability — Amsive, guide alt text SEO
• How to Optimize Website Images: The Complete 2026 Guide — Request Metrics, guide complet performance