Imágenes responsive con la etiqueta Picture
En muchas ocasiones, diseñar una web responsive se complica al utilizar las imágenes. Más allá de utilizar la etiqueta Viewport, que vimos hace unos días, o de asignar a las imágenes una anchura relativa con CSS, necesitamos un método que nos permita seleccionar la imagen más adecuada para cada pantalla en cuanto a su tamaño y resolución. Para eso, tenemos la etiqueta Picture, cuyas principales características explicamos en este artículo.
Para distribuir las imágenes dependiendo de las pulgadas de la pantalla y de su densidad de píxeles surgieron hace tiempo aparecieron algunos plugin javascript, CSS hacks y servicios web especiales que discriminaban por el tamaño de pantalla o por velocidad. De este modo, se conseguía obtener un archivo con el fichero de imagen más adecuado a los parámetros concretos.
La etiqueta Picture, que vendría a sustituir a todos estos métodos, nos permite indicar una imagen y varios archivos como alternativa para las diferentes situaciones. Su uso consigue que el navegador solamente descargue la imagen que se adapta a los parámetros ideales, descartando la descarga de otras imágenes que realmente no necesita.
Elemento Picture
Picture sirve como contenedor para escribir varias imágenes y que el navegador seleccione la imagen más adecuada en cada situación.
Para poder indicar las imágenes dentro del elemento Picture, debemos indicar varias etiquetas Source, que son similares a las de Audio o Video en cuanto a la posibilidad de indicar varios archivos distintos, y es el propio navegador quien localiza el archivo óptimo que pueda reproducirse con los códecs de los que dispone. La diferencia radica en que en lugar de vídeos, lo que se indican son archivos gráficos.
A esto se añade que, dentro de la etiqueta Picture, habrá una imagen corriente, con la etiqueta IMG que se representará por todo navegador que no pueda implementar todavía este tag.
Ahora bien, para que cada navegador sepa cuál es el archivo más adecuado, debemos escribir un atributo media a las etiquetas Source, indicando una mediaquery CSS que será necesario cumplirse para poder usar dicho archivo fuente.
He aquí un sencillo ejemplo de un código que funciona con todos los navegadores:
<picture> <source media='(min-width: 900px)' srcset='grande.png'> <source media='(min-width: 550px)' srcset='media.png'> <img src='archivo-pequeno.jpg'> </picture>
Si el navegador está familiarizado con el tag Picture mostrará la imagen adecuada en cada caso. Si no lo está, mostrará la imagen asignada en IMG.
SOURCE element
Para indicar cada una de las imágenes utilizamos el elemento Source, que nos permite indicar varios archivos gráficos. Esos gráficos son leídos por el navegador uno por uno en orden de colocación, hasta que encuentre uno que pueda utilizar y descartando así los demás.
Source incluye varios atributos, como son srcset, media, sizes y type.
-
scrset, es un campo requerido que incluye la imagen que debe visualizarse:
<source media='(max-width: 300px)' srcset='archivo-hasta-300px.jpg'>
Existe la posibilidad de indicar varias alternativas de imágenes separadas por comas, que indican diferentes versiones de la misma para diferentes densidades de píxeles. Esta opción es especialmente adecuada para los dispositivos móviles actuales, que poseen pantallas con viewports pequeños pero con muchos más píxeles de los que inicialmente aparentan. También resulta útil para las pantallas retina u otras marcas con densidades de píxeles diferentes. Para poder marcar las densidades de píxeles, con 2x o 3x se duplica o triplica la densidad estándar. En caso de no indicar nada, se entendería que ese archivo es para densidades normales de píxeles:
<source media='(min-width: 900px)' srcset='foto.jpg, foto-hd.jpg x2'>
Para este ejemplo, la imagen foto.jpg se distribuye para pantallas con densidad de píxeles común y foto-hd.jpg para densidades mayores.
-
El atributo Media soporta cualquier media query que puede usarse en un selector del tipo 2 media. Existe la opción de indicarlo solamente cuando sea necesario; si no se hace, se entenderá que afecta a todo tipo de pantallas.
El primer archivo por orden que se adapte a las reglas del media query será el representado, aun existiendo varios que puedan adaptarse. Por tal motivo, siempre deberá colocarse el Source sin media query en última posición:
<picture> <source media='(min-width: 900px)' srcset='grande.png'> <source media='(min-width: 550px)' srcset='media.png'> <source srcset='peque.png'> <img src='predeterminado.png'> </picture>
En este ejemplo, usaríamos grande.png para pantallas iguales o superiores a 900px; mientras que media.png sería para pantallas de entre 550 y 899 px y peque.png para el resto de las pantallas. En cambio, predeterminado.png sería para cualquier navegador que no fuese capaz de interpretar el elemento Picture.
-
Sizes permite seleccionar la imagen adecuada de otro modo. Con él, podemos indicar la anchura de la imagen y así el navegador escogerá la imagen de entre varios archivos proporcionados. De este modo, será el navegador el que elegirá la mejor alternativa, teniendo en cuenta el tamaño de la ventana y la densidad de píxeles.
Combinando Sizes y Srcset indicaremos las diferentes alternativas de archivos gráficos.
<picture> <source media='(min-width: 600px)' sizes='65vw' srcset='peque.png 256w, media.png 456w, grande.png 856w, gigante.png 1280w'> <img src='media.png' sizes='65vw' srcset='peque.png 256w, media.png 456w, grande.png 856w, gigante.png 1280w'> </picture>
Con este código, las pantallas más anchas de 600 px aplicarían lo indicado en Source y las de menor anchura aplicarían lo marcado en IMG. Podría darse el caso de que el navegador no reconozca Picture, pero sí los atributos marcados en Sizes y Srcset. Asimismo, podemos observar que ambos atributos pueden aplicarse también a una imagen, pero sin necesidad de incluirla en el elemento Picture.
- type, por su parte, nos permite indicar el formato de una imagen para que el navegador lo seleccione.
Compatibilidad con el elemento Picture
El elemento Picture está disponible en la gran mayoría de los navegadores actuales y, unido a la etiqueta IMG, su uso es más que recomendable hoy en día. De este modo, los navegadores podrán adaptar las imágenes a cada resolución; mientras que los no lo hagan, dejarán la responsabilidad sobre la imagen en la clásica etiqueta IMG.
Existe la posibilidad de que los navegadores antiguos puedan implementar imágenes responsive con el elemento Picture, cargando el Polyfill correspondiente. Picturefill es uno de ellos y contiene un script para dar soporte a Picture mediante Javascript y también los atributos srcset y sizes.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.