La gran cantidad de dispositivos con pantallas de distintos tamaños y resoluciones ha obligado a los programadores a encontrar soluciones para mejorar la calidad y rendimiento de las imágenes. Esta necesidad propició el nacimiento del diseño web responsive y las imágenes adaptables (art direction).
En un principio se usaron técnicas de diseño de hojas de estilo en cascada (CSS). Con un sencillo código CSS es posible adaptar el tamaño de una imagen al ancho de una pantalla. Un ejemplo de código CSS sería el siguiente:
img {
display: block;
margin: 0 auto;
max-width: 100%;
width: 90%;
}
Este código CSS adapta las imágenes de un documento HTML para que ocupen un ancho máximo del 90% del ancho de la pantalla. Además, la imagen aparecerá centrada, con lo que tendrá un 5% de margen a cada lado. El alto se ajusta automáticamente según el ancho, sin perder la proporción.
Sin embargo, esta solución no es perfecta, ya que actualmente existen dispositivos con alta densidad de píxeles en los que una imagen con poca resolución puede verse borrosa. Sería necesario insertar imágenes muy grandes para evitar este problema, pero esto conlleva dos desventajas: ofrecer una carga lenta de la web y forzar al usuario a realizar un alto consumo de datos móviles.
En este sentido, no queda más remedio que hacer uso de varias imágenes con resoluciones diferentes. HTML5 ofrece dos soluciones para obtener imágenes adaptables: el atributo ‘srcset’ para el elemento <img>, con el que se puede ofrecer imágenes de distinta resolución, y el elemento <picture>, con el que se puede cambiar la imagen según el tipo de dispositivo (art direction).
Imágenes adaptables: elemento <picture>
Gracias al elemento <picture> es posible proveer distintos recursos de imagen para cambiarla y adaptarla a un cambio de pantalla. Cada uno de los recursos se inserta mediante el elemento <source>, gracias al que se proveerá versiones de una imagen para distintos escenarios de dispositivo.
Ejemplo de uso del elemento <picture>: tenemos una imagen panorámica de un paisaje y queremos que se muestre completa en un dispositivo de escritorio (pantalla grande); sin embargo, en un dispositivo móvil preferimos mostrar otra imagen que contiene una parte recortada y ampliada del paisaje.
El elemento <picture> contendrá tantos elementos <source> como imágenes distintas queramos proveer. Además, al final de los recursos también se insertará un elemento <img>, cuya finalidad será disponer de una imagen que se mostrará únicamente bajo estos dos criterios:
- Cuando no se cumplen las condiciones declaradas mediante el atributo
mediaen los recursos enlazados previamente - Cuando el navegador web no tenga soporte para el elemento
<picture>.
Ejemplo de código HTML con un elemento <picture>:
<picture>
<source media="(min-width: 650px)"
srcset="/images/html/gato-grande.png">
<source media="(min-width: 465px)"
srcset="/images/html/gato-mediano.png">
<img src="/images/html/gato-peque.png" alt="Gatito">
</picture>
Modifica el tamaño de la ventana para ver los cambios de imagen:
Tal y como se puede ver en este ejemplo, tenemos 3 imágenes diferentes. Por un lado tenemos la imagen por defecto, indicada a través del elemento <img>, que será la imagen más pequeña; y por otro lado tenemos dos elementos <source> que indican diferentes imágenes para cargarse si se cumplen las condiciones indicadas en el atributo media.
Si se cumple una de las condiciones especificadas en el atributo media del elemento <source>, el navegador web estará estará forzado a elegir la imagen en cuestión de forma prioritaria. El navegador no tiene la capacidad de decidir la imagen que se adapta mejor, lo que hace es “cumplir órdenes”.
Por lo tanto, a no ser que tengamos muy claro que lo que queremos es mostrar imágenes diferentes, o si lo único que necesitamos es que la misma imagen se muestre en diferentes resoluciones, lo más recomendable será usar el método ya mencionado del elemento <img> con el atributo srcset.
El elemento <picture> carece de atributos específicos, por lo que sólo tiene los atributos globales, como sería el caso de id, class, style, title, etc.
