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.