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 |