Fournir plusieurs largeurs avec srcset
srcset permet de proposer plusieurs fichiers représentant la même image à différentes largeurs. Le navigateur choisit ensuite une ressource adaptée au contexte.
- Générez plusieurs tailles réalistes plutôt qu’une multitude de variantes.
- Conservez le même cadrage lorsque les fichiers représentent la même image.
- Utilisez des formats modernes quand votre chaîne de production le permet.
Décrire la taille d’affichage avec sizes
sizes aide le navigateur à estimer l’espace que l’image occupera dans la mise en page avant d’avoir calculé tous les styles.
- Faites correspondre sizes aux règles responsive réelles.
- Évitez de déclarer 100vw si l’image n’occupe jamais toute la largeur.
- Testez la ressource réellement chargée dans les outils développeur.
Réserver l’espace avec width et height
Les dimensions intrinsèques permettent au navigateur de calculer le ratio et de réserver de l’espace, ce qui limite les déplacements de contenu pendant le chargement.
- Renseignez width et height sur les images de contenu.
- Gardez le redimensionnement fluide avec CSS.
- Utilisez loading=lazy pour les images non critiques situées plus bas dans la page.
Checklist pratique
- Plusieurs largeurs pertinentes disponibles.
- sizes correspond à la mise en page réelle.
- width et height renseignés.
- Images hors écran chargées paresseusement.
- Poids et format adaptés au contenu.
Continuer avec les ressources liées
Conclusion
Les images responsives améliorent à la fois expérience mobile et performance. L’objectif est de télécharger suffisamment de pixels, mais pas beaucoup plus que nécessaire.