Etiqueta Picture

4 minutos de lectura

Fecha: 9/3/2015

Cuando programamos una web adaptable (responsive) estamos generando un portal que podrá ser visto en distintos dispositivos, por ejemplo en la rejilla de Bootstrap hay unos rangos de resoluciones específicos para cada dispositivo…

El problema de este tipo de webs viene cuando añadimos imágenes, el tamaño de la imagen dependerá de cual es la resolución máxima que nuestra web pueda tener.

Supongamos que nuestra web tiene un ancho máximo de 1200px y buscamos una imagen que ocupe todo el ancho, esta tendrá al menos esa resolución para que esta se vea bien.

Sin embargo como nuestra web es adaptable, cuando la estamos viendo en un teléfono, que tiene un ancho de 400px por ejemplo, le estamos cargando una imagen de 1200px, el triple de lo necesario…

La desventaja es obvia el tiempo de carga será mucho mayor porque esa imagen pesará bastante y total para ver lo mismo.

Como este es un problema generalizado HTML5 han incorporado soluciones:

• Una etiqueta nueva, la etiqueta <picture>

• Y los atributos sizes y srcset para la ya conocida etiqueta <img>.

Estas novedades permiten varias cosas, como es el poder seleccionar una imagen u otra en función del ancho del navegador, el incorporar distintos formatos de imagen dependiendo de si tu navegador la acepta o no, cambiar el tamaño de la imagen según el ancho o usar imágenes con distinta cantidad de pixeles…

Otro hecho importante en estas novedades es que son totalmente compatibles con cualquier navegador, ya que obligan al ser escritas a crear la etiqueta <img> con su correspondiente src, de manera que el navegador tendrá siempre esa referencia para que si lo “nuevo” no funciona use la etiqueta habitual.

Dichos esto veamos cómo implementar todas estas funciones que arriba mencionamos.

Seleccionar una imagen en función del ancho del navegador

<picture>
   <source media="(min-width: 1024px)" srcset="imagen-1024.jpg">
   <source media="(min-width: 640px)" srcset="imagen-640.jpg">
   <img src="imagen-320.jpg" alt="Foto por defecto">
</picture>

Con este código estoy indicando que tenemos una imagen por defecto que sería imagen-320.jpg, y otras 2 imagenes que serian las que se mostrarian en funcion del ancho del navegador.

Como antes dijimos pueden darse dos casos, el primero es que el navegador sea compatible con la etiqueta <picture>, de ser asi este codigo se comportaría asi:

• Para una resolucion igual o superior a 1024px muestra imagen-1024.jpg
• Para una resolucion inferior a 1024px, e igual o superior a 640px muestra imagen-640.jpg
• Para una resolucion inferior a 640px muestra imagen-320.jpg

El segundo caso seria que el navegador no comprendiera la etiqueta <picture> entonces la ignoraria y solo interpretaria la linea de codigo:

<img src="imagen-320.jpg" alt="Foto por defecto">

De manera que independientemente de la resolución se mostrará imagen-320.jpg, que es como sucedía hasta ahora.

Usar distintos formatos de imagen

Seguramente te preguntes para que necesitas hacer esto, lo normal es que tu tengas una imagen en formato jgp, png o gif… y uses uno de ellas, como buen diseñador sabes las ventajas que tienen, por ejemplo el jpg suele pesar menos que png, pero este no pierde tanta calidad y permite usar transparecia, etc…

La cuestion es que estos formatos son leidos por cualquier navegador porque llevan la tira de años entre nosotros, pero han aparecido nuevos formatos, que mejoran la compresion de las imagenes y ademas proporcionan todas las caracteristicas que buscamos con la maxima calidad, el problema es que no todos los navegadores los leen.

De manera que podemos usar la nueva etiqueta <picture> para incorporar el nuevo formato y si no lo soporta el navegador hacer uso de esa etiqueta <img> de respaldo que tiene dentro y que funciona siempre, veamos el código:

<picture>
   <source srcset="imagen.webp" type="image/webp">
   <img src="imagen.jpg" alt="Foto de prueba" />
</picture>

Como se puede observar tenemos de nuevo el source que en este caso, en vez de indicar la resolucion, nos da en el type una imagen en formato webp, si el navegador lo soporta coge esa imagen y sino coge la que está en jpg, sencillo verdad?…

Y ahora vamos a ver como combinar que seleccione la imagen tanto en funcion del ancho del navegador como por su formato

<picture>
   <source media="(min-width: 1024px)" srcset="imagen-1024.webp" type="image/webp">
   <source media="(min-width: 1024px)" srcset="imagen-1024.jpg">
   <source srcset="imagen-640.webp" type="image/webp">
   <img src="imagen-640.jpg" alt="Foto de prueba" />
</picture>

Los dos primeros sources indican que se seleccione imagen-1024.webp o si el navegador no acepta ese formato imagen-1024.jpg, cuando la resolucion sea igual o superior a 1024px.

El siguiente source selecciona imagen-640.webp para una resolucion menor de 1024px e igual o superior a 640px.

En caso de que no acepte el formato webp o no acepte la etiqueta <picture> en general cogería la última linea que muestra imagen-640.jpg

Si quieres saber porque deberias plantearte usar el nuevo formato WebP a los actuales que venimos usando tienes mas informacion en este post!

En este otro post tambien explico las ventajas del nuevo formato que Apple ha decidido usar, el formato HEIF.