Élément image

Le module précédent vous 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 décider quelle version est la plus appropriée. Si vous souhaitez modifier complètement l'image, vous avez 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 encapsule 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, l'élément picture ne fonctionnera pas.

Comme pour l'attribut srcset, l'élément picture met à jour la valeur de l'attribut src dans cet élément img. La différence est que lorsque l'attribut srcset donne des suggestions au navigateur, l'élément picture fournit des commandes. Vous gardez 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 alors le premier qu'il peut.

Formats illustrés

Dans cet exemple, il y a trois images différentes 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" loading="lazy" decoding="async">
</picture>

Le premier élément source pointe vers une image au nouveau format AVIF. Si le navigateur est capable d'afficher des images AVIF, c'est le fichier image 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 des images WebP, il utilisera ce fichier image.

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

Cela signifie que vous pouvez commencer à utiliser de nouveaux formats d'images sans sacrifier la rétrocompatibilité.

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

Tailles d'image

Vous pouvez passer d'un format d'image à l'autre, mais aussi d'une taille d'image à l'autre. 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" loading="lazy" decoding="async">
</picture>

Ici, vous indiquez au navigateur que si la largeur de la fenêtre d'affichage est plus large que 75em, il doit utiliser la grande image. Entre le 40em et le 75em, le navigateur doit utiliser l'image de taille moyenne. Sous 40em, le navigateur doit utiliser la petite image.

Cette méthode 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 s'apparente 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" loading="lazy" decoding="async"
    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 adaptée à la densité en pixels de l'appareil.

Recadrage

Si vous avez uniquement besoin de diffuser des versions de taille différente de la même image, srcset est la meilleure option. Toutefois, si le rendu d'une image n'est pas satisfaisant dans des tailles plus petites, vous pouvez essayer d'en créer une version recadrée.

Les différentes images peuvent avoir des rapports de largeur et de hauteur différents pour mieux s'adapter à leur contexte. Par exemple, dans un navigateur mobile, vous pouvez utiliser un recadrage petit et haut, tandis que dans un navigateur d'ordinateur, vous souhaiterez peut-être utiliser un recadrage large et court.

Voici un exemple d'image héros dont le contenu et la forme sont modifiés 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" loading="eager" decoding="sync">
</picture>

N'oubliez pas que vous ne pouvez pas modifier l'attribut alt en fonction de la source de l'image. Vous devez é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. Mais lorsque vous avez besoin d'un contrôle plus précis, l'élément picture est un outil puissant.

Il existe un type d'image pour lequel vous n'aurez peut-être pas besoin d'une solution: les icônes. Et maintenant !

Testez vos connaissances

Tester vos connaissances sur l'élément image