Démonstration de srcset

Remarques techniques : en fonction du navigateur, pour que certaines démos fonctionnent il peut être nécessaire d'actualiser la page. Attention, une fois que Chrome a téléchargé la plus grande version d'une image, il n'affiche plus que celle-ci : ça se défend, mais c'est ennuyeux pour les démos. Pour revenir à l'état initial, il faut vider le cache : ouvrir la console, cliquer sur le bouton d'actualisation en restant appuyé jusqu'à l'ouverture d'un menu, et sélectionner la dernière entrée (« Empty Cache and Hard Reload »).

Pour des images de taille fixe

L'image ci-dessous a une taille fixée en pixels. Grâce à srcset, le navigateur télécharge l'image qui correspond le mieux à la résolution de l'écran.

Changer le niveau de zoom (et actualiser) !

Pour des images de taille variable

L'image ci-dessous prend toujours 100% de la largeur disponible, quelle que soit la taille de l'écran. Grâce à srcset, le navigateur télécharge l'image qui correspond le mieux à la largeur et à la résolution de l'écran.

Changer la taille de la fenêtre (et actualiser) !

Avec l'attribut sizes

On reprend l'exemple précédent, mais cette fois l'image prend 50% de la largeur.

Changer la taille de la fenêtre (et actualiser) : on voit que le navigateur choisit toujours une image trop lourde.

C'est parce qu'au moment de choisir quelle image télécharger, le navigateur n'a pas encore analysé le CSS. Il ne sait pas que l'image ne fera que 50% de l'écran. Pour être sûr de ne pas être en sous-résolution, il prend l'hypothèse que l'image prendra 100% de l'écran.

Solution : prévenir le navigateur dans le HTML que l'image ne prendra que 50% de la largeur de l'écran. On ajoute cette information dans l'attribut sizes de img, en utilisant les unités de viewport.

Il est possible de préciser plusieurs tailles en fonction de media queries dans l'attribut sizes. Il n'est pas certain que ce soit une bonne idée, car cela revient à mettre des informations de présentation dans le HTML (ennuyeux), ces informations étant de plus déjà présentes dans le CSS (très embêtant).

Rien n'oblige cependant à être très précis dans sizes : ces informations sont utilisées uniquement pour choisir l'image à télécharger. On pourrait par exemple se contenter de deux « catégories » d'images, celles qui sont affichées « plutôt en grand », pour lesquelles on laissera la valeur par défaut de sizes (100vw), et les autres, pour lesquelles on mettra sizes="50vw".

Liens

• Un article très simple et direct sur srcset et sizes
• Un article très détaillé sur le fonctionnement et le principe de srcset et sizes ; voir en particulier cette section, dont l'introduction est particulièrement limpide.
• Réflexion sur sizes et la séparation contenu/présentation