Imágenes Escalables en Responsive Web Design

Cuando desarrollamos un proyecto web en Responsive Web Design, uno de los retos al que nos enfrentamos es el dilema de las imágenes escalables. Existen formas sencillas para escalar una imagen (por ejemplo, determinando el tamaño de la misma relativo a su contenedor). Sin embargo estás soluciones no son a menudo lo más óptimo.

El problema de las imágenes en el Responsive Web Design

Imaginemos que una imagen necesite, para mostrarse en la pantalla de nuestro desktop correctamente, de un archivo de 500Kb de peso. Esta imagen se cargará junto con la página y después se redimensionará para ser mostrada en distintos tamaños dependiendo del dispositivo de salida. Esto es poco eficiente, puesto que al usuario que se conecte desde un dispositivo móvil le estamos haciendo bajarse medio mega, cuando una imagen de unos 20-40Kb hubiese sido suficiente para ver la imagen en este dispositivo con la misma nitidez. Esto redunda en un aumento del tiempo de descarga lo cual, a su vez, es un factor determinante tanto en el posicionamiento de la página como en la experiencia de usuario. Si, por otra parte, decidimos que utilizaremos una imagen más ‘ligera’ y la ampliaremos cuando se muestre en dispositivos de pantalla más grandes, la imagen no tendrá suficiente calidad y se mostrará pixelada y borrosa cuanto más se amplíe a partir de su resolución óptima para pantalla.

Soluciones provisionales actuales

El dilema de las imágenes responsive ha sido desde el principio un quebradero de cabeza para todos los desarrolladores que apostamos por esta técnica. Poco a poco han ido apareciendo distintas ‘soluciones’ de distinta naturaleza (unas utilizan javascript, otras php, otras una combinación de php y el fichero .htaccess,…).

Adaptive Images

Hoy por hoy, el que más me convence es Adaptive Images, a pesar de estar lejos de lo que yo llamaría una solución óptima (pues requiere php, un servidor apache y cookies). Lo mejor de esta solución es que o te exige crear las imágenes de cada resolución sino que las genera la primera vez que estas son solicitadas en el navegador. Así solo nos preocuparemos de subir la resolución más alta necesaria y Adaptive Images generará las otras que se necesiten cuando hagan falta.

jQuery RWD images

Tal vez la más popular es jQuery RWD images, que como su nombre indica es un plugin de jQuery que mostrará una imagen distinta dependiendo del navegador y la resolución de pantalla.

Picturefill

Aunque hay muchas más no quiero saltar este punto sin nombrar Picturefill. Picturefill utiliza javascript para determinar la imagen que se usará mediante atributos data-src (para identificar el fichero) y data-media (que actúa como una media query. Si no se usa javascript devolverá una imagen que identificamos mediante la clásica etiqueta img entre las noscript. Lo que más me gusta de esta solución es que, a pesar de utilizar javascript, la estructura de su sintaxis me recuerda mucho a la propuesta de la W3C en desarrollo que explico en el siguiente punto. (El código a continuación es un ejemplo extraido directamente de su GitHub)
				
					<div data-picture="" data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
<div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->

<noscript>
<img decoding="async" src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</noscript></div>
				
			

Existen decenas de soluciones similares (algunas más distintas que otras) y están apareciendo más cada día. Unas utilizan javascript, otras php y  requieren modificar el .htaccess, cookies… Lo más óptimo será, en cada caso, determinar la solución óptima dependiendo de factores tales como el tráfico, el tipo de servidor web utilizado, …

Solución de futuro por W3C (aún en fase de borrador)

En mi opinión, el futuro inmediato para resolver la cuestión de las imágenes escalables en el diseño web adaptable pasa por una reciente propuesta del W3C para añadir, en este sentido, nuevos elementos y atributos al HTML5. Con estos será posible mostrar distintas fuentes de imágenes dependiendo de las características del navegador y de visualización del usuario. Y es que a pesar de tratarse tan solo de un borrador me parece la mejor apuesta que se está haciendo por el momento.

La propuesta de la W3C se basa en la inclusión del elemento “picture” en el HTML5 así como de un elemento “source” anidado en este.

Así, entre las etiquetas <picture> irá la <source> que determinará las imágenes mostradas según los atributos que se definan.

El elemento source puede llevar ciertos atributos que son los que determinarán la fuente de imagen a utilizar en cada caso.

El atributo más obvio de este elemnto será src, que determinará la fuente a utilizar.

Veamos un ejemplo desde el principio:

				
					<source src="imagen" />
				
			

Visto así resulta una tontería utilizar estos nuevos elementos. Lo interesante viene cuando añadimos al elemento source el atributo media. Así conseguimos que se comporte como una media query que utilizará una imagen distinta para cada ancho de pantalla:

				
					<!--Imagen por defecto-->
<source src="imagen.png" />

<!--Imagen para dispositivos de tamaño medio-->
<source src="imagen-media.png" media="(min-width:400px)" />

<!--Imagen para dispositivos de tamaño grande-->
<source src="imagen-grande.png" media="(min-width:960px)" />

				
			

Por último necesitaremos introducir la clásica etiqueta <img alt=”” /> para hacerlo compatible con navegadores antiguos (no nombraré Explorer, no nombraré Explorer, no nom… ¡Ya he vuelto a decirlo!).

				
					<!--Imagen por defecto-->
<source src="imagen.png" />

<!--Imagen para dispositivos de tamaño medio-->
<source src="imagen-media.png" media="(min-width:400px)" />

<!--Imagen para dispositivos de tamaño grande-->
<source src="imagen-grande.png" media="(min-width:960px)" />

<!--Para desactualizados ;-)-->
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="imagen adaptable" data-lazy-src="imagen.png" /><noscript><img decoding="async" src="imagen.png" alt="imagen adaptable" /></noscript>
				
			

En realidad esto no es más que una adaptación del elemento <video> de HTML5 a imágenes estáticas.

¿Conoces alguna solución alternativa que consideres mejor? ¿Cómo realizas tu el redimensionamiento de las imágenes en RWD?

La culpa de este contenido es de:

...y LO MEJOR ESTÁ EN LA NEWSLETTER

Si te gusta lo que estás viendo en el blog, no te pierdas lo que envío cada jueves a las 11:00. Si no estás en nuestra lista de correo no puedes decir que estás al día en marketing digital.

Responsable del tratamiento: seook
Finalidad: Contestar solicitudes enviadas desde la web
Legitimación: Consentimiento expreso del interesado
Destinatarios: No se cederán datos a terceros
Derechos: Acceder, rectificar y suprimir los datos, así como otros que se detallan en la información adicional.
Información adicional: Puede consultar la información adicional y detallada sobre protección de datos, en nuestra política de privacidad.

Información básica Protección de Datos Reglamento (UE) 2016/679
Responsable del tratamiento: seook
Finalidad: Contestar solicitudes enviadas desde la web
Legitimación: Consentimiento expreso del interesado
Destinatarios: No se cederán datos a terceros
Derechos: Acceder, rectificar y suprimir los datos, así como otros que se detallan en la información adicional.
Información adicional: Puede consultar la información adicional y detallada sobre protección de datos, en nuestra política de privacidad