Design Web: utiliser l’élément <picture> et ‘Art direction’
important : cette vidéo fait suite à la vidéo Utiliser l'attribut srcset et il est fortement conseillé de la visionner avant.
Dans la présente vidéo (durée: 20:07) nous allons étudier l'emploi des éléments <picture> et <source> en association avec la balise <img> afin d'imposer au navigateur de charger une image spécifique en fonction de la largeur du viewport.
Les images que nous proposerons pourront être d'aspects (pixel ratio, homothétie, cadrage et position du sujet) différents afin de cadrer au mieux à la situation. Cette façon de procéder est nommée Art Direction dans le jargon technique dans la mesure où elle nous permet d'imposer une image avec un aspect différent, en opposition à la méthode du resolution switching que nous avions utilisé dans la vidéo précédente avec l'attribut srcset employé seul avec l'élément <img> et qui elle nous permettait d'offrir la même image dans des versions de tailles différentes.
Nous aborderons aussi brièvement la possibilité d'utiliser l'élément <source> afin de proposer plusieurs types (mime) d'images au navigateur et parmi lesquelles il choisira la première dans l'ordre qu'il peut afficher.
La vidéo est disponible ci-dessous sur ma chaine Youtube
(réglez le lecteur sur 720pHD).