Imágenes en diseño web adaptativo: picture, sizes y srcset

Desde que hace años empezamos a implementar el diseño web adaptativo o responsive web design (ver primer artículo en este blog) teníamos un problema pendiente: las imágenes.

El problema era claro: con la proliferación de diferentes dispositivos, con diferentes capacidades y anchos de pantalla, unido a la menor velocidad de descarga de dispositivos móviles, teníamos que encontrar la manera de servir la imagen más adecuada a cada caso. Es decir, si tenemos una imagen de 1024px y el ancho de pantalla del dispositivo es de 320px, ¿no sería más adecuado que la imagen que sirviéramos a ese dispositivo tuviera 320px de ancho en vez de 1024px?

Este problema está dejando de existir. Por fin hay un acuerdo general en cómo hacerlo a través del elemento picture de HTML5 (Ver el elemento picture en W3.org) y de un par de nuevos atributos del elemento img (sizes y srcset), que poco a poco van introduciendo los diferentes navegadores (a excepción, de momento, de Internet Explorer).

Su uso es bastante lioso, al menos a primera vista. Por eso vamos a ver ejemplos de código con diferentes usos. Tened en cuenta que si no tenéis el navegador adecuado no podréis ver los ejemplos en funcionamiento (aquí podéis ver qué navegadores lo soportan). Como opción alternativa tenéis Picturefill 2.0 que permite su uso incluso en aquellos navegadores que no soportan aún picture.

Las situaciones en las que nos podemos encontrar son:

  • Que queramos cambiar los tamaños de las imágenes dependiendo del ancho de la pantalla del navegador.
  • Que queramos optimizar las imágenes para diferentes resoluciones de pantalla (high-dpi)
  • Que queramos mostrar diferentes formatos de imágenes (diferentes mime types) en función de que el navegador los soporte o no.
  • Que queramos mostrar diferentes imágenes diferentes (por ejemplo una vista desde lejos o una más cercana) en función de diferentes factores contextuales. Es lo que se ha venido en llamar diferente “arte”.

Cambiar el tamaño de una imagen dependiendo del ancho de pantalla

Si queremos mostrar una imagen de un tamaño diferente en función del ancho de la ventana del navegador, haríamos:

Vamos a ver qué implica el código anterior: Para anchos de pantalla de un tamaño de 640px y superior se usa una foto con un ancho del 60% de la ventana del navegador. Para anchos inferiores, se usa una foto que ocupe el 100%. El navegador selecciona la imagen entre una selección dada de imágenes con anchos de 200px, 400px, 800px y 1200px.

Los atributos de sizes y srcset sobreescriben el atributo src del elemento img. Los navegadores antiguos simplemente utilizarán el elemento src.

Uso de imágenes con diferente dpi

Los navegadores con pantallas con high-DPI pueden obtener una imagen con mayor resolución, mientras que el resto obtendrán una imagen normal:

Uso de diferentes formatos de imágenes en función de las posibilidades del navegador

Si queremos utilizar un formato especial de imagen sólo soportado por algunos navegadores (por ejemplo webp), haríamos (usando ya picture):

Los navegadores que soporten WebP obtendrán una imagen WebP, mientras que el resto obtendrán una imagen JPG.

Cambiar la imagen en función del ancho del navegador

Supongamos que queremos mostrar una imagen para anchos superiores a 1024px y una diferente (por ejemplo una con una vista diferente, o con un zoom de la otra imagen, etc..) para anchos inferiores. Es lo que se ha venido a denominar “arte” diferente:

Como podéis ver dentro del elemento picture tenemos al final el elemento img tal y como lo hemos usado siempre. picture requiere que exista img como elemento final. Si no existiera, no se vería nada. Además será la imagen que se verá en aquellos navegadores que no soporten picture.

Pero antes tenemos el elemento source, que es el realmente interesante. En este ejemplo lo que sucede es que en aquellos navegadores con un ancho de 1024px y superior, se usará la foto “imagen-1024.jpg”. En los anchos de pantalla menores (y en aquellos que no soporten picture) se verá la imagen “imagen-650.jpg”.

Y podemos añadir mas casos:

En este caso si el ancho de pantalla está entre 650px y 1024px se cargará la pantalla “imagen-650.jpg”. Si es superior a 1024px se cargará la imagen “imagen-1024.jpg”. En todos los demás casos (incluyendo cuando el elemento picture no lo soporte el navegador) se cargará la imagen “imagen-320.jpg”.

Combinando diferentes casos

Si queremos complicar aún más las cosas, podemos hacer combinaciones de los cuatro casos que acabamos de ver.

Por ejemplo, si queremos combinar el posible uso de diferentes formatos de imágenes con diferentes “artes”:

En navegadores con un ancho de 1024px y superiores se usará la imagen “imagen-1024.jpg” o “imagen-1024.webp” en función de si lo soporta o no el navegador. En los navegadores más pequeños se usará la imagen “imagen-650.jpg” o “imagen-650.webp”. Los navegadores que no soporten picture obtendrán “imagen-650.jpg”.

Si queremos combinar diferentes resoluciones con diferentes “artes”:

En navegadores con 1024px de ancho y superiores se cargará la imagen 1, mientras que en el resto se cargará la imagen 2. Además se mostrarán diferentes resoluciones en función de las posibilidades del navegador.

¿Puedo usarlo ya?

Como hemos visto al principio del artículo los navegadores actuales no soportan aún en su mayoría el elemento picture, pero el hecho de que siempre haya una imagen por defecto para aquellos navegadores que no lo soporten nos permite usarlo ya.

Quizás nos suponga algo de carga de trabajo crear diferentes tipos y tamaños de cada imagen, pero con la ayuda de CMSs como WordPress podemos definir los diferentes tamaños en los que queremos que nos corte cada imagen.

Además es cuestión de no mucho tiempo que los principales navegadores lo soporten en sus versiones estables. En cuanto a Internet Explorer supongo que no tendrá más remedio que incorporarlo también cuanto antes.

Si queremos que funcione ya, podemos usar, como ya comentamos, Picturefill 2. Como veréis es muy fácil de usar.

Artículos de interés

17 comentarios en “Imágenes en diseño web adaptativo: picture, sizes y srcset

    1. Yo siempre uso las siguientes resoluciones, aunque tampoco lo dejo cerrado ya siempre intento que ciertos estilos sirvan para varias:

      Mobile: 320px – 640px
      Tablet: 640px – 1024px
      Desktop: 1024px – superior (normalmente hasta 1600px)

    1. Gracias Carlos! Con la gran cantidad de dispositivos diferentes que hay no podemos ya hablar de estándares claros. Lo mejor es que vuestro diseño adaptativo no se rompa para ningún ancho/alto de pantalla.

  1. Muchas gracias por la información me ha sido de mucho utilidad para desarrollar mi sitio web y avanzar en el desarrollo de imágenes y posicionamiento

  2. Hola, muchas gracias por el artículo. Hice las pruebas correspondientes y en Chrome anda perfecto, pero en Firefox y Explorer, al redimensionar la pantalla desde mas chico a mas grande, no funciona (al revés sí). Hay alguna manera de arreglar esto?

  3. Excelente post! Cierto que hay que tratar a fondo las imágenes y en general todo el responsive en el diseño web, puesto que no sólo tenemos el factor estético de cara al usuario, sino que también tenemos que tratar de gustar a Google 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *