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
L'attribut srcset
fournit ________ au navigateur, l'élément <picture>
fournit ________.
Voici quelques-unes des fonctionnalités de l'élément <picture>
:
avif
ou webp
plus petits et plus faciles à télécharger si possible.