Image responsive
Implémentation d'image qui sert différentes tailles ou différents formats selon l'appareil, la taille d'écran et la vitesse de connexion du visiteur.
Les images responsives évitent aux utilisateurs mobiles de télécharger des images prévues pour ordinateur, ce qui gaspille de la bande passante et ralentit le chargement. HTML propose l'attribut srcset pour le changement de résolution et l'élément picture pour l'art direction, afin de servir des recadrages ou formats différents selon les appareils. Les frameworks modernes comme Next.js automatisent la génération d'images responsives, créent plusieurs tailles depuis une source unique et servent la version optimale selon le viewport. Les formats WebP et AVIF avec repli JPEG réduisent encore la bande passante. Les images responsives sont essentielles pour les Core Web Vitals : une image surdimensionnée retarde le Largest Contentful Paint, la principale métrique de chargement qui affecte l'expérience utilisateur et le classement dans les moteurs de recherche.