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 décider de la version à utiliser. Si vous souhaitez modifier complètement l'image, vous devez disposer de l'élément picture.
Tout comme srcset s'appuie sur l'attribut src, l'élément picture s'appuie sur l'élément img. L'élément picture s'encapsule autour d'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 propose 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 la première commande possible.
Formats illustrés
Cet exemple présente 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, il sélectionne alors ce fichier image. 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 utilisera le fichier image dans l'attribut src de l'élément img. Cette image est un JPEG.
Vous pouvez ainsi commencer à utiliser de nouveaux formats d'images sans sacrifier la rétrocompatibilité.
Dans cet exemple, l'attribut type a indiqué au navigateur le type de format d'image spécifié.
Tailles d'image
Vous pouvez non seulement passer d'un format d'image à un autre, mais aussi changer de taille d'image. Utilisez l'attribut media pour indiquer au navigateur la largeur d'affichage de l'image. Insérez 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>
Vous indiquez ici au navigateur que si la largeur de la fenêtre d'affichage est supérieure à 75em, il doit utiliser la grande image. Le navigateur doit utiliser l'image moyenne entre le 40em et le 75em. Sous 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" 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 peut désormais choisir l'image la mieux adaptée à la densité de pixels de l'appareil.
Recadrage
Si vous ne devez diffuser que 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 des tailles plus petites, vous pouvez essayer de la recadrer.
Les différentes images peuvent avoir des rapports de largeur et de hauteur différents pour mieux les adapter à leur contexte. Par exemple, dans un navigateur pour mobile, vous souhaiterez peut-être diffuser un recadrage plus petit et plus étroit, tandis que dans un navigateur pour ordinateur, vous souhaiterez peut-être diffuser un recadrage large et court.
Voici un exemple d'image héros dont le contenu et la forme changent 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. Toutefois, pour les cas où 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'avez peut-être pas besoin d'une solution: les icônes. C'est la prochaine étape.
Testez vos connaissances
Testez vos connaissances sur l'élément illustration
Lorsque l'attribut srcset attribue ________ au navigateur, l'élément <picture> donne ________.
Voici quelques-unes des fonctionnalités de l'élément <picture>:
avif ou webp si possible.