PictureLa balise <picture> permet de définir plusieurs sources à une balise <img>. Cet fonctionnalité permet de spécifier certaines sources d'images mieux adaptées à l'écran de l'utilisateur.
Par exemple, une balise <img> de base est utilisée à gauche. Remarquez comment le sujet perd de son importance lorsqu'il est affiché dans un format étroit. Tandis qu'à droite, une balise <picture> permet de changer la source de ladite image afin d'afficher une version au cadrage plus serré sur le sujet lorsque l'écran est étroit.
Photo: Valérian Mazataud Le Devoir
Pour définir une <picture> de base, il suffit de spécifier une balise <img> à l'intérieur de celle-ci.
Par exemple:
Cet exemple minimaliste affichera toujours la balise <img> avec son contenu original inclus dans l'attribut src. Bref, l'incorporation de la balise <picture> n'aura aucun effet.
Il est possible de spécifier une ou plusieurs sources alternatives grâce à la balise <source>.
Par exemple:
Lorsque des <source> sont présentes, le navigateur les parcours une à la suite de l'autre et dès qu'une d'entre elles voit sa condition être respectée, la valeur de son srcset est attribuée au src de la balise <img> voisine.
Bref, si l'écran à une largeur équivalente ou supérieure à 1000px, img-large.jpg sera affichée, sinon img.jpg sera utilisée.
Il est possible d'utiliser l'ensemble des conditions offertes dans les média queries CSS.
- Recadrer une image selon l'espace disponible.
- Afficher une image dans une résolution correspondant à celle de l'écran de l'utilisateur.
- Afficher des images mieux agencées au thème de l'utilisateur foncé ou clair.
- Éviter d'afficher des GIFs animés aux individus ayant spécifiés préférer éviter autant que possible les animations.
- Fournir une image optimisée pour l'impression.