Images adaptatives avec srcset, sizes et picture

Ce que c'est

Le guide MDN sur les images adaptatives distingue deux problèmes. Le changement de résolution : une même image doit être livrée sous la forme d'un fichier plus petit pour un écran petit ou à faible densité, et d'un fichier plus grand pour un écran grand ou à haute densité. La direction artistique : un cadrage ou une composition différents sont souhaités selon les mises en page, par exemple un cadrage portrait serré sur téléphone.

Le changement de résolution utilise srcset sur img. Avec des descripteurs de largeur, chaque candidat indique sa largeur intrinsèque (hero-800.jpg 800w, hero-1600.jpg 1600w) et sizes indique au navigateur la largeur qu'occupera l'emplacement, sous la forme d'une liste de conditions média avec une longueur chacune et une valeur par défaut finale ((max-width: 600px) 100vw, 50vw). Le guide précise que les pourcentages ne sont pas autorisés comme largeurs d'emplacement, que vw l'est, et que le navigateur utilise la première condition correspondante et ignore les autres, l'ordre compte donc. La référence img ajoute que sizes n'est censé être présent que lorsque srcset utilise des descripteurs de largeur. Pour une image affichée à une taille CSS fixe, les descripteurs de densité (icon.png 1x, icon@2x.png 2x) sont plus simples.

La direction artistique utilise <picture> avec des enfants <source media="…" srcset="…"> et un repli img ; le même élément avec <source type="image/avif"> fournit un repli de format, puisque le navigateur ignore les types qu'il ne peut pas décoder.

Pourquoi c'est important

Les images représentent généralement la plus grande part des octets d'une page, et un téléphone qui télécharge une image d'en-tête destinée au bureau gaspille de la bande passante et retarde le rendu. MDN note que le navigateur commence à télécharger les images avant même que l'analyseur principal ait chargé le CSS et le JavaScript de la page, donc faire le choix au niveau du balisage permet de démarrer le bon téléchargement plus tôt.

Comment l'appliquer

• Générer trois à cinq largeurs par image au moment du build et toutes les lister ; laisser le navigateur choisir. Nommer les fichiers par largeur pour garder srcset lisible.
• Écrire sizes à partir de la mise en page CSS réelle ; un sizes incorrect fait choisir silencieusement des fichiers surdimensionnés. Le revérifier quand la mise en page change.
• Toujours définir les attributs width et height (ou aspect-ratio en CSS) afin que l'espace soit réservé avant l'arrivée de l'image.
• Utiliser loading="lazy" pour les images situées sous la ligne de flottaison et decoding="async" lorsque l'image n'est pas nécessaire au premier rendu ; garder l'image d'en-tête visible d'emblée en chargement eager.
• Garder alt significatif ; le balisage adaptatif ne change pas les règles d'accessibilité.

Pièges

srcset n'est qu'une indication : MDN précise que l'agent utilisateur sélectionne n'importe laquelle des sources disponibles à sa discrétion, donc un navigateur peut continuer à utiliser un candidat plus grand déjà en cache plutôt que d'en récupérer un plus petit. sizes est évalué avant que le CSS de l'image n'ait nécessairement été chargé, les valeurs doivent donc être autosuffisantes. Mélanger des descripteurs de largeur et de densité dans un même srcset est invalide. Les images d'arrière-plan en CSS ont besoin à la place de image-set() ou de media queries.