34. Images responsives (srcset et <picture>)
Les pages web modernes doivent être esthétiques sur les petits téléphones comme sur les écrans de bureau géants. Le HTML5 propose des solutions pour servir la taille d'image appropriée, économisant ainsi de la bande passante et améliorant les temps de chargement.
34.1 L'attribut srcset (Changement de résolution)
Ajouté à la balise <img> standard, srcset vous permet de définir une liste d'images et d'indiquer au navigateur la taille (largeur) de chaque image. Le navigateur décide ensuite quelle image est la plus adaptée en fonction de la taille de l'écran de l'appareil.
html
400w,800w,1200windiquent au navigateur la largeur réelle des images.
34.2 L'élément <picture> (Direction artistique)
Utilisé lorsque vous devez servir des fichiers d'image entièrement différents en fonction de la taille ou de l'orientation de l'écran (ex : afficher une image verticale recadrée sur mobile et une image horizontale large sur ordinateur).
html
