Dans cette 7ème vidéo de site web facile, on se préoccupe de servir des images adaptées à l'appareil sur lesquelles elles vont être vues.
Nous avions déjà vu les "media queries breakpoints" dans une précédente vidéo. Cependant, il subsiste un autre problème. Alors que sur des écrans Ultra HD ou 4K on voudra charger les images en très haute qualité, on voudra au contraire utiliser des images de taille "raisonnable" sur les smartphones, dont les écrans ne permettent pas de profiter des détails d'une image haute résolution et dont, qui plus est, l'accès au réseau contraint à restreindre la taille des images.
En html, les élèments img ont un attribut appelé srcset qui permet de faire celà :
<img
srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg"
alt="Elva habillée en fée" />
Mais celui-ci est plutôt compliqué à utiliser, comme nous allons nous rendre compte dans cette vidéo !