MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

<picture>

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

L'élément HTML <picture> est un conteneur utilisé afin de définir 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) et selon l'appareil utilisé (la densité de pixels de l'affichage par exemple).

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
WHATWG HTML Living Standard
La définition de '<picture>' dans cette spécification.
Standard évolutif Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 38 13 38 (38) Pas de support 25 9.1
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 38 (Oui) 38.0 (38) Pas de support 25 iOS 9.3

Voir aussi

Étiquettes et contributeurs liés au document

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