---
title: <picture>
slug: Web/HTML/Element/picture
tags:
  - Element
  - Experimental
  - HTML
  - Reference
  - Web
  - picture
translation_of: Web/HTML/Element/picture
---
<div>{{HTMLRef}}{{SeeCompatTable}}</div>

<p>L'<strong>element HTML <code>&lt;picture&gt;</code></strong> és un contenidor utilitzat per especificar diversos elements {{HTMLElement("source")}} per a una determinada {{HTMLElement("img")}} continguda en el mateix. El navegador triarà la font més adequada d'acord amb el disseny actual de la pàgina (les restriccions del quadre en el qual apareixerà la imatge) i el dispositiu en el qual es mostrarà (per exemple, un dispositiu normal o HiDPI).</p>

<h2 id="Context_d'ús">Context <span class="short_text" id="result_box" lang="ca"><span>d'ús</span></span></h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contingut dinàmic</a>, phrasing content, contingut incrustat</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td>Zero or més elements {{HTMLElement("source")}}, seguits per un element {{HTMLElement("img")}}, <span id="result_box" lang="ca"><span>opcionalment</span> <span>barrejats</span> <span>amb</span> <span>elements</span> <span>amb </span><span>suport script</span></span></td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti contingut incrustat.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLPictureElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element només inclou els <a href="/en-US/docs/Web/HTML/Global_attributes">atributs globals</a>.</p>

<h2 id="Exemple_1_Usant_l'atribut_media">Exemple 1: <span class="short_text" id="result_box" lang="ca"><span>Usant</span> <span>l'atribut</span> </span> <code>media</code></h2>

<p>L'atribut <code>media</code> li permet especificar una consulta de medis que l'agent d'usuari avaluarà per a seleccionar un element {{HTMLElement("source")}}. Si la consulta de medis s'avalua com a <code>false</code> , l'element {{HTMLElement("source")}} s'omet.</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>

<h2 id="Exemple_2_Usant_l'atribut_type">Exemple 2: <span class="short_text" id="result_box" lang="ca"><span>Usant</span> <span>l'atribut</span></span> <code>type</code></h2>

<p>L'atribut <code>type</code> li permet especificar un tipus MIME per als recursos que es proporcionen en l'atribut <code>srcset</code> de l'element {{HTMLElement ( "source")}}. Si l'agent d'usuari no admet el tipus donat, l'element {{HTMLElement("source")}} s'omet.</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="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</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>Definició incial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>38</td>
   <td>{{CompatGeckoDesktop("38")}}</td>
   <td>Edge 13</td>
   <td>25</td>
   <td>9.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>38</td>
   <td>{{CompatGeckoMobile("38")}}</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>iOS 9.3</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veure">Veure</h2>

<ul>
 <li>L'element {{HTMLElement("img")}}</li>
</ul>