Las imágenes son notoriamente uno de los aspectos más desafiantes del responsive design.
Hoy veremos como el elemento <picture>, una solución al problema de imágenes responsive, puede empezar a ser usado en algunos navegadores.

Es un nuevo elemento que está por ser parte del HTML5.

Esto nos permitira que el proceso, de añadir imagenes responsive, sea tan sencillo como actualmente los elementos de <audio> y <video>. Te dejará poner múltiples etiquetas source, cada una especificando diferentes nombres de archivo de imágenes junto con condiciones en las que cada una será cargada.

Te dejara cargar una imagen totalmente diferente dependiendo de:

  • El resultado de media queries ej. viewport height, width, orientation
  • Densidad de Pixel

Esto significa que puedes:

  • Cargar imágenes de tamaño de archivo apropiado, haciendo el mejor uso de la conexión.
  • Cargar imágenes recortadas a una diferente relación de aspecto para ajustarse a los cambios en el layout a diferente anchura.
  • Cargar imágenes con alta resolución para pantallas de alta densidad de Pixel

Los pasos básicos para trabajar con <picture> son:

  1. Abre y cierra la etiqueta de <picture></picture>
  2. Entre esas etiquetas crea un elemento <source> para cada query que quieras ejecutar.
  3. Agrega un atributo media que contenga tu query con atributos como alto, ancho, orientación etc..
  4. Agrega un atributo srcset con el nombre de archivo correspondiente de la imagen a cargar.
  5. Agrega nombres de archivos extra a tu atributo srcset si quieres utilizar diferentes densidades de pixel, ej. Pantallas retina.
  6. Agrega un elemento <img> como fallback.

Aquí esta un ejemplo que verifica si la ventana es menor que 768px, si lo es, entonces carga una imagen más pequeña:

<picture>
    <source srcset="small.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="Mi imagen por defecto">
</picture>

Notaras que el syntax usado en el atributo media es el mismo al que estas acostumbrado en media queries de CSS.

Puedes hacer lo mismo, puedes hacer queries para max-width, min-width, max-height, min-height, orientation

Puedes hacer cosas como cargar versiones de una imagen apaisada o vertical dependiendo de la orientación del dispositivo, y también puedes mezclar queries del tipo size al mismo tiempo. Por ejemplo:

<picture>
    <source srcset="small_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="small_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="Mi imagen por defecto">
</picture>

El código de arriba carga una versión recortada de manera apaisada y más pequeña para un dispositivo más pequeño y de orientación apaisada.

Si el dispositivo tiene una orientación vertical entonces carga una versión recortada verticalmente, a un tamaño más pequeño para un dispositivo más reducido o de tamaño grande para un dispositivo como tablets, portatiles u ordenadores.

Si quieres utilizar diferentes versiones de resolución de tus imágenes para pantallas de alta densidad, lo puedes hacer agregando nombres de archivos extra al atributo srcset. Por ejemplo, veamos nuestro primer snippet del código de arriba agregando el manejo para resolución 2x para pantallas Retina:

<picture>
    <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
    <source srcset="default.jpg, default_retina.jpg 2x">
    <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

El media query sigue siendo evaluado primero para que puedas controlar las dimensiones de la imagen que aparecerá en pantalla. Después de la densidad de pixel de la pantalla será verificada y si altas densidades cuentan con soporte y son habilitados por las preferencias del usuario, la versión de alta densidad de la imagen será cargada.

Esperemos que os sea de utilidad y para cualquier duda podéis escribirnos en nuestro twitter @thinkadvancees.