Picture

La 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.

CodePen | smnarnold 👀

Pour définir une <picture> de base, il suffit de spécifier une balise <img> à l'intérieur de celle-ci.

Par exemple:

<picture>
  <img src="img.jpg">
</picture>

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.

Sources & conditions

Il est possible de spécifier une ou plusieurs sources alternatives grâce à la balise <source>.

Par exemple:

<picture>
  <source srcset="img-large.jpg" media="(min-width: 1000px)">
  <img src="img.jpg">
</picture>

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.

Utilité

• 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.