Image réactive
Implémentation d'image qui propose différentes tailles ou formats en fonction de l'appareil du spectateur, de la taille de l'écran et de la vitesse de connexion.
Les images réactives empêchent les utilisateurs mobiles de télécharger des images au format ordinateur, ce qui gaspille de la bande passante et ralentit le chargement des pages. HTML fournit l'attribut srcset pour le changement de résolution et l'élément image pour la direction artistique – servant différentes cultures ou formats sur différents appareils. Les frameworks modernes comme Next.js automatisent la génération d'images réactives, créant plusieurs tailles à partir d'une seule source et proposant la version optimale en fonction de la fenêtre d'affichage. WebP et AVIF fAVIFts avec JPEG fallbacJPEGréduisent davantage la bande passante. Les images réactives sont essentielles aux performances de Core Web Vitals : une image surdimensionnée retarde Largest Contentful Paint, la principale mesure de performances de chargement qui affecte à la fois l'expérience utilisateur et le classement des moteurs de recherche.