Élément image

Le module précédent a montré comment l'attribut srcset vous permet de fournir des versions de différentes tailles de la même image. Le navigateur peut alors choisir la version appropriée à utiliser. Si vous souhaitez modifier complètement l'image, vous aurez besoin de l'élément picture.

De la même manière que srcset s'appuie sur l'attribut src, l'élément picture s'appuie sur l'élément img. L'élément picture entoure un élément img.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

Si aucun élément img n'est imbriqué dans l'élément picture, ce dernier ne fonctionnera pas.picture

Comme l'attribut srcset, l'élément picture met à jour la valeur de l'attribut src dans l'élément img. La différence est que l'attribut srcset donne des suggestions au navigateur, tandis que l'élément picture donne des commandes. Vous avez ainsi le contrôle.

source

Vous pouvez spécifier plusieurs éléments source dans un élément picture, chacun avec son propre attribut srcset. Le navigateur exécute ensuite la première qu'il peut.

Formats illustrés

Dans cet exemple, trois images différentes sont disponibles dans trois formats différents :

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image."
    width="300" height="200">
</picture>

Le premier élément source pointe vers une image au nouveau format AVIF. Si le navigateur est capable d'afficher les images AVIF, c'est ce format qu'il choisit. Sinon, il passe à l'élément source suivant.

Le deuxième élément source pointe vers une image au format WebP. Si le navigateur est capable d'afficher les images WebP, il utilisera ce fichier image.

Sinon, le navigateur reviendra au fichier image dans l'attribut src de l'élément img. Cette image est au format JPEG.

Vous pouvez ainsi commencer à utiliser de nouveaux formats d'image sans sacrifier la rétrocompatibilité.

Dans cet exemple, l'attribut type indiquait au navigateur le type de format d'image spécifié.

Tailles d'image

En plus de passer d'un format d'image à un autre, vous pouvez également changer la taille des images. Utilisez l'attribut media pour indiquer au navigateur la largeur d'affichage de l'image. Placez une requête média dans l'attribut media.

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image."
    width="300" height="200">
</picture>

Ici, vous indiquez au navigateur que si la largeur de la fenêtre d'affichage est supérieure à 75em, il doit utiliser la grande image. Entre 40em et 75em, le navigateur doit utiliser l'image de taille moyenne. En dessous de 40em, le navigateur doit utiliser la petite image.

Cela diffère de l'utilisation des attributs srcset et sizes sur l'élément img. Dans ce cas, vous fournissez des suggestions au navigateur. L'élément source ressemble davantage à une commande qu'à une suggestion.

Vous pouvez également utiliser le descripteur de densité de pixels dans l'attribut srcset d'un élément source.

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

Dans cet exemple, vous indiquez toujours au navigateur ce qu'il doit faire à différents points d'arrêt, mais il a désormais la possibilité de choisir l'image la plus appropriée pour la densité de pixels de l'appareil.

Recadrage

Si vous n'avez besoin que de diffuser des versions de tailles différentes de la même image, srcset est la meilleure option. Toutefois, si une image ne s'affiche pas correctement dans une taille plus petite, vous pouvez essayer de la recadrer.

Les différentes images peuvent avoir des rapports largeur/hauteur différents pour mieux s'adapter à leur contexte. Par exemple, sur un navigateur mobile, vous pouvez diffuser un recadrage étroit et haut, tandis que sur un navigateur pour ordinateur, vous pouvez diffuser un recadrage large et court.

Voici un exemple d'image héros qui modifie son contenu et sa forme en fonction de la largeur de la fenêtre d'affichage. Ajoutez les attributs width et height à chaque élément source.

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" fetchpriority="high">
</picture>

N'oubliez pas que vous ne pouvez pas modifier l'attribut alt en fonction de la source de l'image. Vous devrez écrire un attribut alt qui décrit à la fois l'image en taille réelle et l'image recadrée.

Vous n'aurez probablement pas besoin d'utiliser l'élément picture pour la plupart de vos images responsives. Les attributs srcset et sizes de l'élément img couvrent de nombreux cas d'utilisation. Toutefois, l'élément picture est un outil puissant pour les situations où vous avez besoin d'un contrôle plus précis.

Il existe un type d'image pour lequel vous n'aurez peut-être besoin d'aucune de ces solutions : les icônes. C'est la prochaine étape.

Vérifiez vos connaissances

Tester vos connaissances sur les éléments d'image