---
title: <picture>
slug: Web/HTML/Elemento/picture
tags:
  - Elemento
  - Fotografía
  - Imagen
  - graficos
translation_of: Web/HTML/Element/picture
---
<div>{{HTMLRef}}{{SeeCompatTable}}</div>

<p>El <strong>elemento HTML <code>&lt;picture&gt;</code> </strong>es un contenedor usado para especificar múltiples elementos {{HTMLElement("source")}} y un elemento {{HTMLElement("img")}} contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. Si no hay coincidencias con los elementos <code>&lt;source&gt;</code>, el archivo especificado en los atributos {{htmlattrxref("src", "img")}} del elemento <code>&lt;img&gt;</code> es utilizado. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento <code>&lt;img&gt;</code>.</p>

<p>Para seleccionar la imagen óptima, el {{Glossary("user agent")}} examina cada atributo {{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, y {{htmlattrxref("type", "source")}} de la fuente para seleccionar la imagen compatible.</p>

<p>El navegador escogerá la fuente más apropiada de acuerdo al diseño de la página (las limitaciones de la caja donde aparecerá la imagen) y el dispositivo que se utilize para visualizarla (p.ej. pantalla normal o hiDPI).</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/es-ES/docs/Web/HTML/Content_categories">Categorías de contenido</a></th>
   <td><a href="/es-ES/docs/Web/HTML/Content_categories#flow_content">Flujo de contenido</a>, contenido textual o estático, contenido incrustado</td>
  </tr>
  <tr>
   <th scope="row">Contenido permitido</th>
   <td>Cero o más elementos {{HTMLElement("source")}}, seguidos por un elemento {{HTMLElement("img")}}, mezclados opcionalmente con elementos script-supporting.</td>
  </tr>
  <tr>
   <th scope="row">Omisión de etiquetas</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Padres permitidos</th>
   <td>Cualquier elemento que permita embeber contenido.</td>
  </tr>
  <tr>
   <th scope="row">ARIA roles permitidos</th>
   <td>Ninguno.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLPictureElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento sólo incluye <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales.</a></p>



<h2 id="Notas_de_uso">Notas de uso</h2>

<p>Se puede usar la propiedad {{cssxref("object-position")}} para ajustar la posición de la imagen dentro del marco del elemento, y la propiedad {{cssxref("object-fit")}} para controlar como el tamaño de la imagen se ajusta para adaptarse al marco.</p>

<h2 id="Ejemplos">Ejemplos</h2>

<p>Estos ejemplos demuestran los efectos que tienen diferentes atributos del atributo {{HTMLElement("source")}} en la selección de la imagen a desplegar cuando se usa dentro de <code>&lt;picture&gt;</code>.</p>

<h3 id="El_atributo_media">El atributo <code>media</code></h3>

<p>El atributo <code>media</code> permite especificar una media query que el agente de usuario evaluará para seleccionar un elemento {{HTMLElement("source")}}. Si la media query evalua a <code>false</code>, el elemento {{HTMLElement("source")}} es omitido.</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="El_atributo_type">El atributo <code>type</code></h3>

<p>El atributo <code>type</code> permite especificar un tipo MIME para los recursos dados en el atributo srcset del elemento {{HTMLElement("source")}}. Si el agente de usuario no soporta dicho tipo, el elemento {{HTMLElement("source")}} es omitido.</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="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>38</td>
   <td>13</td>
   <td>{{CompatGeckoDesktop("38")}}</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>9.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>38</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("38")}}</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>iOS 9.3</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>Elemento {{HTMLElement("img")}}</li>
 <li>Elemento {{HTMLElement("source")}}</li>
 <li>Posicionando y redimensionando la imagen dentro de su marco: {{cssxref("object-position")}} y {{cssxref("object-fit")}}</li>
</ul>