Définition
Les images responsive sont une technique HTML qui consiste a servir la version optimale d'une image en fonction de la taille de l'ecran, de la resolution et du format supporte par le navigateur. Les deux approches principales sont : l'attribut srcset avec sizes sur la balise img (permet au navigateur de choisir la meilleure source parmi plusieurs resolutions) et l'element picture avec des source (permet de specifier differents formats comme WebP, AVIF avec des fallbacks). En SEO, les images responsive impactent directement le LCP (Largest Contentful Paint) en evitant de charger des images surdimensionnees sur mobile. Google recommande de fournir des images a la bonne taille pour chaque viewport. Les bonnes pratiques incluent : generer plusieurs tailles (320px, 640px, 1024px, 1920px), utiliser des formats modernes (WebP, AVIF), specifier les dimensions width/height pour eviter le CLS, et combiner avec le lazy loading pour les images below the fold.
Points clés à retenir
- Utiliser srcset et sizes ou l'element picture pour servir la bonne taille
- Impact direct sur le LCP et les Core Web Vitals
- Combiner formats modernes (WebP, AVIF) avec des fallbacks
Exemples concrets
Attribut srcset
Un blog utilise img srcset avec des versions 400w, 800w et 1600w et l'attribut sizes pour servir la bonne taille selon la largeur d'ecran. Le LCP passe de 3.5s a 1.8s.
Element picture avec formats modernes
Un site e-commerce utilise l'element picture avec des sources AVIF, WebP et JPEG fallback. Le poids des images est reduit de 60% en moyenne, ameliorant le LCP de 3.1s a 1.9s.
Questions fréquentes
Le srcset n'est pas un facteur de classement direct, mais il ameliore les performances (LCP, poids de page) et l'experience mobile, qui sont des facteurs de classement. Google recommande explicitement les images responsive dans ses guidelines.
Non, les deux ont des usages differents. srcset est ideal pour servir la meme image en differentes resolutions. picture est utile quand vous voulez servir des formats differents (AVIF, WebP) ou des images totalement differentes selon le viewport (art direction).
Termes liés
Aller plus loin avec LemmiLink
Découvrez comment LemmiLink peut vous aider à mettre en pratique ces concepts SEO.
Dernière mise à jour : 2026-02-07