Normalmente la forma de cargar imágenes en HTML es mediante el elemento img al cual pasamos como parámetro la URL de la imagen a cargar. Pero desde HTML5 disponemos del elemento picture que nos ayuda a eficientar y cargar imágenes por resolución con HTML5. Es decir, dependiendo de la resolución a la que tengamos la pantalla se mostrará una imagen u otra, lógicamente adaptada a la resolución que esté la pantalla en ese momento. De esta manera podemos construir mejores aplicaciones responsive.
Pero pasemos a definir el problema. La idea es que el usuario puede cargar nuestra página en diferentes dispositivos, ya sea un móvil, una tablet o un ordenador. En cada uno el tamaños de dispositivos la página se verá de forma diferente. Y lo que nos interesa es en cada tamaño cargar una imagen adaptada a dicho tamaño.
Si utilizamos el elemento img tendremos lo siguiente:
<img src="imagen.png" alt="imagen general"/>
En el caso de que utilicemos el elemento img se cargará siempre la misma imagen independientemente del tamaño de la pantalla.
Es por eso que recurrimos al elemento picture el cual tiene la siguiente estructura.
<picture> <source srcset="imagen" media="media-query"> <source srcset="imagen" media="media-query"> <source srcset="imagen" media="media-query"> ... <img src="image-fallback" alt="Imagen si no funciona picture"> </picture>
Lo que ya vemos es que en el elemento picture podemos indicar varios orígenes mediante el elemento source. Además si nos fijamos en el elemento source vemos que disponemos de dos atributos. Por un lado el atributo srcset en el cual pasamos la URL de la imagen que queremos mostrar y por otro lado tenemos un atributo media en el que podemos indicar una media query. En el caso de que la media query de un valor true será cuando se muestre la imagen indicada en el atributo srcset.
Y será esta media query con la que gestionaremos el tamaño del dispositivo. Las media query nos permiten acceder a datos de configuración del dispositivo como puede ser tamaño mínimo o máximo de la pantalla (min-width y max-width, min-height y max-height), la resolución (resolution), el número de colores que se utilizan (color-index),…
En nuestro vamos a utilizar la propiedad min-width que nos dará el tamaño mínimo de la pantalla. La utilizaremos de la siguiente forma:
(min-width: size px)
Donde el tamaño será el tamaño en pixels de la pantalla. Vamos a controlar varios tamaños.
- 48opx, para móviles.
- 768px, para tablets.
- 992px, para pc.
- 1280px, para pc con pantalla grande.
De esta forma los media query nos quedaría de la siguiente forma:
min-width: 1280px; min-width: 992px; min-width: 768px; min-width: 480px;
Si lo aplicamos al código de nuestro elemento picture tendremos el siguiente resultado:
<picture> <source srcset="imagen1280.png" media="(min-width: 1280px)"> <source srcset="imagen992.png" media="(min-width: 992px)"> <source srcset="imagen768.png" media="(min-width: 768px)"> </picture>
Si nos fijamos vemos que hemos creado una imagen optimizada para cada resolución. Pero que no hemos creado una para la mínima de 480px y es que en este caso lo que vamos a hacer es insertar un elemento img que será el que se cargue en todos los casos y además nos sirve para proteger la visualización si nuestro navegador no soporta los elementos HTML5.
El código final nos quedaría de la siguiente forma.
<picture> <source srcset="imagen1280.png" media="(min-width: 1280px)"> <source srcset="imagen992.png" media="(min-width: 992px)"> <source srcset="imagen768.png" media="(min-width: 768px)"> <img src="imagen480.png" alt="MDN"> </picture>
Si cargamos la página vemos como mediante el comportamiento responsive implementado el código, van cambiando las imágenes. Permitiendo tener una web más optimizada que nos permita cargar imágenes por resolución con HTML5.
