---
title: '<picture> : l''élément d''image adaptative'
slug: Web/HTML/Element/picture
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/picture
---
<div>{{HTMLRef}}</div>

<p>L'élément HTML <strong><code>&lt;picture&gt;</code></strong> est un conteneur utilisé afin de définir zéro ou plusieurs éléments {{HTMLElement("source")}} destinés à un élément {{HTMLElement("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 <code>&lt;source&gt;</code>, c'est le fichier défini par l'attribut {{htmlattrxref("src", "img")}} de l'élément <code>&lt;img&gt;</code> qui sera utilisé.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>L'agent utilisateur examine chaque attribut présent dans <code>&lt;source&gt;</code> ({{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, and {{htmlattrxref("type", "source")}}) pour sélectionner l'URL de la meilleure ressource selon la disposition de la page, les caractéristiques de l'écran de l'appareil, etc.</p>

<p>L'élément <code>&lt;picture&gt;</code> peut être utilisé pour :</p>

<ul>
 <li>Fournir une direction artistique : rogner, modifier des images selon différentes conditions de média</li>
 <li>Fournir différents formats d'image lorsque certains formats ne sont pas pris en charge par les navigateurs</li>
</ul>

<p>Lorsqu'on fournit des versions haute densité d'une image pour les appareils avec un DPI élevé, on utilisera plutôt {{htmlattrxref("srcset", "img")}} sur l'élément <code>&lt;img&gt;</code> à 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.</p>

<h2 id="Attributs">Attributs</h2>

<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>

<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>

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

<div class="blockIndicator note">
<p><strong>Note : </strong>Ces propriétés doivent être utilisées sur les éléments <code>&lt;img&gt;</code> fils et pas sur l'élément <code>&lt;picture&gt;</code>.</p>
</div>

<h2 id="Exemples">Exemples</h2>

<h3 id="Utiliser_l'attribut_media">Utiliser l'attribut <code>media</code></h3>

<p>L'attribut <code>media</code> de l'élément {{HTMLElement("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 à <code>false</code>, l'élément {{HTMLElement("source")}} est ignoré.</p>

<pre class="brush: html">&lt;picture&gt;
 &lt;source srcset="mdn-logo-wide.png" media="(min-width: 600px)"&gt;
 &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
&lt;/picture&gt;
</pre>

<h3 id="Utiliser_l'attribut_type">Utiliser l'attribut <code>type</code></h3>

<p>L'attribut <code>type</code> d'un élément {{HTMLElement("source")}} permet d'indiquer le type MIME du fichier fourni via l'attribut <code>srcset</code>. Si l'agent utilisateur ne prend pas en charge ce type de fichier, l'élément {{HTMLElement("source")}} est ignoré.</p>

<pre class="brush: html">​&lt;picture&gt;
 &lt;source srcset="mdn-logo.svg" type="image/svg+xml"&gt;
 &lt;img src="mdn-logo.png" alt="MDN"&gt;
&lt;/picture&gt;
</pre>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu</a></th>
   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>.</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td>Zéro ou plusieurs éléments {{HTMLElement("source")}} suivi d'un élément {{HTMLElement("img")}} avec éventuellement des éléments scriptés entre.</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Tout élément qui peut contenir du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>Aucun</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLPictureElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '&lt;picture&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("html.elements.picture")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{HTMLElement("img")}}</li>
 <li>{{HTMLElement("source")}}</li>
 <li>Les propriétés CSS aidant au positionnement et au redimensionnement : {{cssxref("object-position")}} et {{cssxref("object-fit")}}</li>
</ul>