Vous pouvez avvoir des images avec un rendu très correct sur une écran basse résolution, mais avec un rendu atroce sur un écran HD. Ça n'est pas forcément un problème : on peut sauver une image avec de plus larges dimensions. Mais on ne veut pas servir une très grande image à tout le monde, qu'il en ait besoin ou non, ce qui aurait pour effet une expérience utilisateur lamentable, surtout sur les réseaux mobiles.
Le problème du bon vieil attribut src est qu'il ne donne l'adresse que d'une version de l'image. Et si on veut fournir des alternatives permettant au navigateur de choisir la meilleure version selon le contexte ?
<img src="img_1x.jpg" srcset="img_1x.jpg 1x, img_2x.jpg 2x" alt="mon image">
La syntaxe ici signifie simplement que le navigateur devrait choisir le fichier 2 pour un écran HD, ou le fichier 1 dans les autres cas. Le '1x, 2x' est appelé Pixel Density Descriptor.
Srcset peut aussi être utilisé avec des unités de largeur.
note perso : https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Spot the deliberate mistake!
At around 2:30 you’ll see that Firefox chooses wallaby_1x.jpg even with srcset turned on. That’s because we did the screencast on a 1x display :^).
Examples:
A fun article on srcset (Warning: A little bit of NSFW language) Device pixel density list