La llegada de HTML5 supuso una gran cantidad de características y novedades para el desarrollo de sitios web multiplataforma.
Una de las más interesantes de cara al diseño y la optimización, es la llegada del atributo srcset.
Con las imágenes de fondo en el CSS ya teníamos resuelto el problema mediante el uso de mediaqueries. Pero con las imágenes de contenido, es decir las que ponemos usando la etiqueta
<img src="imagen.jpg" />
no era tan fácil. Había ya algunas soluciones en js como retinajs, pero no es algo nativo de HTML5 y requieren tener js activado, además de cargar algún plugin.
Este atributo nos ayuda a definir diferentes versiones de la imagen para mostrar una o otra según el tipo de pantalla sin necesidad de Javascript.
Tiene además una sintaxis bastante simple y limpia, donde basta con asignar los diferentes tamaños para cada ocasión
Por ejemplo para usar una imagen en pantallas con doble densidad de píxeles podemos poner en el atributo scrset la ruta a la imagen seguido de un espacio y
2x
.
<img src="image-src.png" srcset="image-2x.png 2x" />
Y para usar imágenes más pequeñas en tamaños móviles y tablets, por ejemplo en grandes fotografías o banners, podemos usar breakpoints para definir tamaños especificos. Por ejemplo,
srcset="imagen-movil.jpg 480w"
indica que esa imagen sólo se cargará en pantallas de ancho igual o inferior a 480 px, pero no tendrá en cuenta la densidad de píxeles. Por suerte podemos usar varios valores para la misma imagen, lo que nos permite jugar con todos los dispositivos, tamaños y tipos de pantalla sin ningún problema.
<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x" />
El único problema es que de momento no es soportado por todos los navegadores, pero esto es algo que cambiará en poco tiempo.
Chrome tiene soporte completo desde la versión 38 y parcial desde la 34.
Firefox tiene soporte desde la versión 32 pero viene desactivado por defecto, cosa que podemos solucionar escribiendo
about:config
en la barra del navegador y cambiando la opción
dom.image.srcset
a
true
. Esperemos que en las próximas versiones venga activado por defecto.
Safari lo soporta parcialmente desde su versión 8.
Internet explorer para variar no lo soporta aún en su versión 11, pero a estas alturas de la web, ¿existe alguien con una pantalla retina que use Internet Explorer?
En definitiva, que no hay casi ninguna excusa ya para que no empieces a ofrecer un sitio con imágenes 100% responsive a tus visitantes. Mejorarás su experiencia de manera notable.