Optimisation des images pour le SEO : le guide technique

Les images représentent en moyenne 50% du poids total d'une page web. Une image de 2 Mo non optimisée peut à elle seule faire échouer vos Core Web Vitals et faire fuir vos visiteurs. Pourtant, l'optimisation des images est souvent négligée.

Le format d'image : WebP et AVIF

WebP

Le format WebP développé par Google offre une compression 25 à 35% supérieure au JPEG à qualité visuelle égale. Il est supporté par tous les navigateurs modernes depuis 2020.

AVIF

L'AVIF va encore plus loin avec une compression 50% supérieure au JPEG. Le support navigateur est plus récent mais couvre désormais plus de 90% des utilisateurs. C'est le format recommandé en 2026.

Stratégie de formats

Utilisez la balise <picture> pour servir le format optimal à chaque navigateur. AVIF en priorité, WebP en fallback, JPEG en dernier recours. Les CDN modernes comme Cloudflare et Vercel font cette conversion automatiquement.

L'attribut alt : SEO et accessibilité

L'attribut alt est le texte alternatif d'une image. Il sert à deux choses : décrire l'image pour les lecteurs d'écran (accessibilité) et aider Google à comprendre le contenu de l'image (SEO).

Bonnes pratiques

Décrivez précisément ce que montre l'image. "Photo d'un audit SEO montrant les résultats Core Web Vitals" est meilleur que "image-audit-1". Intégrez votre mot-clé naturellement quand c'est pertinent, mais évitez le bourrage de mots-clés.

Ne laissez jamais l'alt vide sur une image qui a du sens. Seules les images purement décoratives (séparateurs, icônes décoratives) peuvent avoir un alt vide.

Lazy loading : charger au bon moment

Le lazy loading retarde le chargement des images hors écran jusqu'à ce que l'utilisateur scroll vers elles. Cela améliore drastiquement le LCP et le temps de chargement initial.

Ajoutez simplement loading="lazy" à vos balises <img>. Mais attention : ne mettez jamais le lazy loading sur l'image hero ou la première image visible — elle doit se charger immédiatement.

Dimensions explicites

Spécifiez toujours les attributs width et height sur vos images. Sans ces dimensions, le navigateur ne peut pas réserver l'espace nécessaire avant le chargement de l'image, ce qui provoque des décalages visuels (CLS).

Les frameworks modernes comme Next.js gèrent automatiquement les dimensions via leur composant Image. Si vous utilisez du HTML standard, calculez et ajoutez manuellement les dimensions.

Le poids des images

Visez moins de 200 Ko par image en taille affichée standard. Pour les images hero full-width, restez sous 400 Ko. Utilisez des outils comme Squoosh ou Sharp pour compresser sans perte de qualité visible.

Le responsive images avec srcset permet de servir des tailles adaptées à chaque écran. Un mobile de 375px n'a pas besoin d'une image de 1920px de large.

Le SEO des images : Google Images

Google Images génère du trafic significatif pour certains secteurs (e-commerce, immobilier, tourisme, recettes). Pour y apparaître, vos images doivent avoir des alt descriptifs, être dans un contexte sémantique pertinent, et être référencées dans votre sitemap images.

Nommez vos fichiers de manière descriptive : audit-seo-resultats-performance.webp plutôt que IMG_3847.jpg. Le nom de fichier est un signal SEO léger mais réel.

Notre audit SEO gratuit analyse toutes les images de votre site : formats, poids, attributs alt manquants, lazy loading, dimensions et impact sur vos Core Web Vitals.