HTML — Images adaptatives
Les images adaptatives proposent au navigateur plusieurs fichiers et des indications de mise en page. Il peut ainsi choisir une source adaptée, sans envoyer systématiquement une grande photo à chaque téléphone.
Une seule photo très volumineuse n’est pas un bon choix par défaut sur téléphone. Les images adaptatives proposent plusieurs fichiers et une indication de mise en page au navigateur. Il peut choisir la source selon la taille d’affichage, la densité de pixels et les formats pris en charge. L’élément img a toujours besoin d’un alt utile et de dimensions intrinsèques, comme dans la leçon sur les images HTML.
Proposer plusieurs largeurs avec srcset et sizes
Un descripteur w indique au navigateur la largeur réelle de chaque fichier en pixels. sizes décrit la place prévue dans la mise en page, souvent à l’aide d’une condition média et d’une valeur de repli comme 100vw ou 720px. Gardez un src fonctionnel pour les clients plus anciens. Différez le chargement des images situées sous la première zone visible ; l’image principale devrait généralement se charger immédiatement.
<img
src="lesson-800.jpg"
srcset="lesson-480.jpg 480w, lesson-800.jpg 800w, lesson-1400.jpg 1400w"
sizes="(max-width: 640px) 100vw, 720px"
alt="Leçon HTML annotée affichée dans un navigateur"
width="1400"
height="900"
>- src reste une source de repli fonctionnelle.
