L'élément HTML <picture> est un conteneur utilisé afin de définir zéro plusieurs éléments <source> destinés à un élément <img>. Le navigateur choisira la source la plus pertinente selon la disposition de la page (les contraintes qui s'appliquent à la boîte dans laquelle l'image devra être affichée), selon l'appareil utilisé (la densité de pixels de l'affichage par exemple avec les appareils hiDPI) et selon les formats pris en charge (ex. WebP pour les navigateurs Chromium ou PNG pour les autres). Si aucune correspondance n'est trouvée parmi les éléments <source>, c'est le fichier défini par l'attribut src de l'élément <img> qui sera utilisé.

Catégories de contenu Contenu de flux, contenu phrasé, contenu intégré.
Contenu autorisé Zéro ou plusieurs éléments <source> suivi d'un élément <img> avec éventuellement des éléments scriptés entre.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui peut contenir du contenu intégré.
Rôles ARIA autorisés Aucun
Interface DOM HTMLPictureElement

Attributs

Cet élément inclut uniquement les attributs universels.

Exemples

Utiliser l'attribut media

L'attribut media de l'élément <source> permet de rédiger une requête média qui sera évaluée par l'agent utilisateur afin de sélectionner ou non la source. Si la requête média est évaluée à false, l'élément <source> est ignoré.

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Utiliser l'attribut type

L'attribut type d'un élément <source> permet d'indiquer le type MIME de du fichier fourni via l'attribut srcset. Si l'agent utilisateur ne prend pas en charge ce type de fichier, l'élément <source> est ignoré.

​<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<picture>' dans cette spécification.
Standard évolutif Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple3813

38

32 — 521

Non259.1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple3838 Oui

38

32 — 521

259.3 ?

1. From version 32 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, YoruNoHikage, J.DMB, Goofy, nicoo
 Dernière mise à jour par : SphinxKnight,