Imágenes: Picture

El diseño de páginas web responsive, o adaptables permiten que las páginas sean visibles en diferentes tamaños de pantalla: desd el smartphone hasta el ordenador de pantalla pasando por las tablets o los portátiles. HTML 5 facilita algo la labor con algunos elementos nuevos como puede ser este nuevo elemento picture con el cual podemos insertar varias imágenes, y el navegador elegirá la que mostrará en función de la resolución del dispositivo donde se muestre.

Este elemtento contiene a su vez uno o más elemntos <source> y un elemento <img>., por ejemplo:

<picture>
< source srcset = "imagen_peq.jpg" media="(min-width:768px") type="image/jpg" >
< source srcset = "imagen_gra.jpg" media="(min-width:1200px") type="image/jpg">
< img src="imagen_minima.jpg" alt="descripcion" width="88" height="31">
</picture>

Si el dispositivo tiene un ancho por encima de 1200 px se muestra la imagen_gra.jpg, si está entre 768 y 1200 se muestra la imagen_peq.jpg y por debajo se muestra imagen_minima.jpg. Ideal para el RWD (REsponsive Web Design) o diseño web adaptativo, sin necesidad de javascript o de CSS

Este sería un uso básico. El elemento media soporta cualquier definición de medio similar a las soportadas por CSS3: como destino (impresora, braille, pantalla, etc.) resolución de pantalla. Es la regla @media en linea.

En este otro ejemplo se ve el uso del elmento type para insertar una imagen svg.

<picture>
<source srcset="imagen_base.svg" type="image/svg+xml">
<img src="imagen-normal.png" alt="normal">
</picture>

Otro ejemplo, pero esta vez además tniendo en cuenta la orientación de la pantalla donde se vea la página

<picture>    
    <source srcset="peq_apaisada.jpg" media="(max-width: 640px) and (orientation: landscape)">
    <source srcset="peq_vertical.jpg" media="(max-width: 640px) and (orientation: portrait)">
    <source srcset="def_apaisada..jpg" media="(min-width: 640px) and (orientation: landscape)">    
    <source srcset="def_vertical.jpg" media="(min-width: 640px) and (orientation: portrait)">     
    <img srcset="def_apaisada.jpg" alt="Imagen por defecto">
</picture>

En estos momentos es soportada por los navegadores habituales: Firefox (38), Chrome (38), Edge, Safari(9.1), Opera(25).

Solo debes tener en cuenta que el elemento img dentro de picture debe ser el último, este elemento se usa por compatibilidad para casos en que no se aapta ninguna imagen o el explorador no soporte la eqitue <picture>.


.