Servir les bonnes tailles et formats d'images (srcset, sizes, picture, AVIF/WebP) améliore le LCP et réduit la bande passante. Guide pour des images responsive et performantes.
L'attribut srcset propose plusieurs résolutions ; sizes indique la taille d'affichage selon le viewport. L'élément picture permet l'art direction (cadrage différent par breakpoint) et le choix du format (AVIF, WebP, fallback JPEG/PNG). Les navigateurs modernes sélectionnent la meilleure combinaison. Pour les sites à forte densité d'images (e-commerce, médias), une stratégie responsive (plusieurs tailles, formats modernes) améliore nettement les Core Web Vitals et l'expérience mobile.
Conseil : utiliser des CDN ou des services d'optimisation d'images (Vercel, Cloudinary) pour générer les variantes.
Points forts / Points faibles
Points forts
- LCP et bande passante optimisés
- Format moderne (AVIF, WebP) avec fallback
- Art direction et responsive natifs
- Support navigateurs large
Points faibles
- Génération des variantes à automatiser
- Gestion du cache et des URLs
- Tests sur plusieurs devices