Picture

2

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.

Voir le CodePen de Simon Arnold (@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 et 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.

Exercice Ant-Man 🐜

Exercice Batman 🦇

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écifier préféré éviter autant que possible les animations.
  • Fournir une image optimisée pour l'impression.

Pour en savoir plus, voir cet article MDN à propos de picture.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme