Elemento picture

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento picture ha sido diseñado para proveer soporte nativo para imágenes adaptativas en HTML5. Cuando se utiliza en conjunto con source e img actúa como una imagen que será cargada de manera diferente de acuerdo a las propiedades del dispositivo en el que se muestre. En otras palabras, los navegadores que lo soporten cargarán una imagen diferente (provistas por los elementos source) para cada tipo de dispositivo especificado.

Un elemento picture puede contener cualquier número de elementos source seguidos por un elemento img. Cada elemento source proveerá un tipo de dispositivo distinto (densidad de píxeles, tamaño del área de visualización, formato de imagen, etc), mientras que el elemento img representará a la imagen misma y constituirá un último recurso para los casos en que ninguno de los elementos source pueda aplicarse y/o el soporte para picture no esté presente.

La presencia del elemento img dentro de picture es obligatoria. Si está ausente, ninguna imagen será mostrada bajo ninguna circunstancia.

Hasta el 13/04/15, el soporte para el elemento picture es muy bajo. Los autores pueden tener que recurrir a scripts para reemplazar su funcionalidad consistentemente.

Ejemplos

En nuestro primer ejemplo, mostraremos a un elemento picture con tres fuentes diferentes (source), que se mostrarán según sea conveniente en pantallas de diferentes anchos. Para lograr esto, usaremos los atributos media y srcset del elemento source. El recurso por defecto, provisto por el elemento img será mostrado cuando los criterios de ningún atributo media correspondan y cuando el soporte para picture se encuentre ausente.

<picture>
  <source media="(min-width: 1280px)" srcset="../../../images/isaac-newton-l.jpg">
  <source media="(max-width: 520px)" srcset="../../../images/isaac-newton-s.jpg">
  <img class="flr" src="../../../images/isaac-newton.jpg" alt="Sir Isaac Newton">
</picture>
<p>Isaac Newton fue un físico, filósofo, teólogo, inventor, alquimista y matemático inglés. Es autor de los Philosophiæ naturalis principia mathematica, más conocidos como los Principia, donde describe la ley de la gravitación universal y estableció las bases de la mecánica clásica mediante las leyes que llevan su nombre. Entre sus otros descubrimientos científicos destacan los trabajos sobre la naturaleza de la luz y la óptica (que se presentan principalmente en su obra Opticks) y el desarrollo del cálculo matemático.</p>
Sir Isaac Newton

Isaac Newton fue un físico, filósofo, teólogo, inventor, alquimista y matemático inglés. Es autor de los Philosophiæ naturalis principia mathematica, más conocidos como los Principia, donde describe la ley de la gravitación universal y estableció las bases de la mecánica clásica mediante las leyes que llevan su nombre. Entre sus otros descubrimientos científicos destacan los trabajos sobre la naturaleza de la luz y la óptica (que se presentan principalmente en su obra Opticks) y el desarrollo del cálculo matemático.

Ahora proveeremos nuevamente diferentes fuentes, pero esta vez usando la nueva combinación de srcset y sizes en el elemento img únicamente (aunque también podría ser usado con picture y source). La idea en este método es poner a disponibilidad diferentes versiones de una imagen en el atributo srcset, cada una emparejada con un descriptor que indica su ancho. Esta es una tarea muy simple y consiste solo de proveer la imagen que has preparado con antelación, seguida por un espacio, su ancho y la letra W minúscula (por ejemplo, "selfie.jpg 640w").

Asimismo, el atributo sizes es usado para conformar una lista con los anchos que la imagen debería tener de acuerdo a cada tamaño de pantalla (por ejemplo, "(min-width: 30em) 40vw", lo que indica que la imagen debería tener un ancho que es igual al 40% del ancho del área de visualización (vw) cuando el ancho total de la pantalla es mayor a 30em). Con toda esta información, queda en manos del navegador la elección de la imagen correcta para cualquier escenario particular, lo que ahorra a los autores una buena cantidad de tiempo y esfuerzo (en contraste con las media queries).

Este método es ultra flexible y ha sido diseñado para reemplazar a las media queries en diseños adaptativos que cambian su forma en base a las propiedades del dispositivo.

<img class="flr" src="../../../images/isaac-newton.jpg" alt="Sir Isaac Newton" srcset="../../../images/isaac-newton-l.jpg 280w, ../../../images/isaac-newton.jpg 180w, ../../../images/isaac-newton-s.jpg 80w" sizes="(min-width: 60em) 30vw, (max-width: 20em) 80vw, 50vw">
<p>Isaac Newton fue un físico, filósofo, teólogo, inventor, alquimista y matemático inglés. Es autor de los Philosophiæ naturalis principia mathematica, más conocidos como los Principia, donde describe la ley de la gravitación universal y estableció las bases de la mecánica clásica mediante las leyes que llevan su nombre. Entre sus otros descubrimientos científicos destacan los trabajos sobre la naturaleza de la luz y la óptica (que se presentan principalmente en su obra Opticks) y el desarrollo del cálculo matemático.</p>

Nota: este ejemplo emula una imagen en un sitio web que ha sido diseñado para ser visto en diferentes dispositivos. Mostrar la versión representada de éste aquí sería inconsistente con el diseño de la página ya que las unidades están expresadas en vw (porcentaje del ancho de la pantalla).

Finalmente proveeremos diferentes fuentes basándonos en otra propiedad. Esta vez, el atributo type del elemento source será crucial, ya que lo usaremos para proveer la misma imagen en dos formatos: el nuevo WebP en el elemento source (no soportado muy ampliamente) y el tradicional JPEG en el elemento img (como último recurso). En este ejemplo, los navegadores que soporten al formato WebP mostrarán la imagen provista en el elemento source, mientras que el resto usarán la imagen provista en el elemento img.

<picture>
  <source type="image/webp" srcset="../../../images/victor-hugo.webp">
  <img class="flr" src="../../../images/victor-hugo.jpg" alt="Victor Hugo">
</picture>
<p>Victor Marie Hugo fue un poeta, dramaturgo y escritor romántico francés, considerado como uno de los más importantes en lengua francesa. También fue un político e intelectual comprometido e influyente en la historia de su país y de la literatura del siglo XIX. Fue un poeta lírico, con obras como Odas y baladas (1826), Las hojas de otoño (1832) o Las contemplaciones (1856), poeta comprometido contra Napoleón III en Los castigos (1853) y poeta épico en La leyenda de los siglos (1859 y 1877). Fue también un novelista popular y de gran éxito con obras como Nuestra Señora de París (1831) o Los miserables (1862).</p>
Victor Hugo

Victor Marie Hugo fue un poeta, dramaturgo y escritor romántico francés, considerado como uno de los más importantes en lengua francesa. También fue un político e intelectual comprometido e influyente en la historia de su país y de la literatura del siglo XIX. Fue un poeta lírico, con obras como Odas y baladas (1826), Las hojas de otoño (1832) o Las contemplaciones (1856), poeta comprometido contra Napoleón III en Los castigos (1853) y poeta épico en La leyenda de los siglos (1859 y 1877). Fue también un novelista popular y de gran éxito con obras como Nuestra Señora de París (1831) o Los miserables (1862).

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.