Cerrar
Image Alt

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

Comentarios

  • MAHD

    Muy buen post!!
    Muchas gracias.

    16 septiembre, 2014
    contestar
  • Está muy bien, lo usaré. El tema de la imagen por defecto es indispensable.

    un saludo!

    18 septiembre, 2014
    contestar
  • Excelente info. Aunque tengo una pregunta.

    Cuáles son los tamaños estandar que se usan hoy en día? por ejemplo los teléfonos móviles usan resoluciones distintas? los ipads con retina, etc?

    Saludos y gracias.

    15 octubre, 2014
    contestar
    • Vicentkun

      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)

      17 febrero, 2015
      contestar
  • Gran post Juan.
    Me estoy aficionando a este Blog, por la claridad de las explicaciones 😉
    Me uno a la pregunta de Cristopher, ¿cuáles son los estándares?
    Saludos!

    6 noviembre, 2014
    contestar
  • Un excelente articulo y explicado claramente Juan, gracias por compartir y desde ahora seré un asiduo visitante para aprender más, Saludos!

    9 diciembre, 2014
    contestar
  • gloria.9

    Excelente post!
    Información muy buena que llevare a la práctica. Gracias.

    10 marzo, 2015
    contestar
  • Justo lo que buscaba, muchísimas gracias Juan, me será de mucha ayuda. Saludos!

    28 abril, 2015
    contestar
  • Diseño web pampaweb

    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

    4 mayo, 2015
    contestar
  • 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?

    11 junio, 2015
    contestar
    • Aclaro que he probado con y sin Picturefill, y el resultado es el mismo.

      11 junio, 2015
      contestar
  • Siempre cambiaba la imagen en función del ancho del navegador, pero con lo que vi, voy a probar esos otros enfoques, un articulo genial.

    20 junio, 2015
    contestar
  • Justo esto es lo que estaba buscando, una pasada de artículo, muy bien explicado.

    15 septiembre, 2015
    contestar
  • 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 🙂

    1 febrero, 2016
    contestar
  • Muchas gracias por la información de gran utilidad para desarrollar páginas.
    Excelente artículo.

    18 octubre, 2016
    contestar

Escribe un comentario