L'élément HTML <picture> est un conteneur utilisé afin de définir zéro ou 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é.

Afin de déterminer l'URL de la ressource à charger, l'agent utilisateur examine chaque source présente dans <source>s srcset, media, and type attributes to select a compatible image that best matches the current layout of the page, the characteristics of the display device, etc.

L'élément <picture> peut être utilisé pour :

  • Fournir une direction artistique : rogner, modifier des images selon différentes condition de média
  • Fournir diférents formats d'image lorsque certains formats ne sont pas pris en charge par les navigateurs

Lorsqu'on fournit des versions hautes densité d'une image pour les appareils avec un DPI élevé, on utilisera plutôt srcset sur l'élément <img> à la place. Ainsi, les navigateurs pourront choisir une image à plus basse densité dans un contexte où les flux réseaux doivent être économisés. De plus, il ne sera pas nécessaire d'écrire des requêtes média explicites.

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

Il est possible d'utiliser la propriété CSS object-position afin d'ajuster le positionnement de l'image dans le cadre de l'élément. La propriété object-fit permet quant à elle de contrôler la façon dont la taille de l'image est ajustée.

Note : Ces propriétés doivent être utilisées sur les éléments <img> fils et pas sur l'élément <picture>.

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>

Résumé technique

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

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 38Edge Support complet 13Firefox Support complet 38
Support complet 38
Aucun support 32 — 52
Désactivée
Désactivée 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.
IE Aucun support NonOpera Support complet 25Safari Support complet 9.1WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet OuiFirefox Android Support complet 38
Support complet 38
Aucun support 32 — 52
Désactivée
Désactivée 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.
Opera Android Support complet 25Safari iOS Support complet 9.3Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

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