4.4. Imágenes elásticas

Hasta el momento se explicaron distintos métodos para atacar problemáticas derivadas del uso de medidas fijas para los componentes de una página web. Sin embargo, los casos mencionados refieren a elementos que pueden readaptarse con naturalidad al flujo de la misma. Las imágenes, como así también otros elementos conocidos como media – videos, por ejemplo – poseen de manera inherente un tamaño fijo y real, con las más variadas relaciones de aspecto. Por este motivo, la manera en la que deben ser escalados en un diseño responsivo es también distinta.

Hay dos maneras de utilizar imágenes en una página web, y aunque sus usos suelen ser diferentes, en ocasiones pueden ser confundidos, y hasta intercambiados para cumplir con algún objetivo específico.

Desde la estructura, es posible agregarlas utilizando la etiqueta en el documento HTML, como es el caso de una fotografía de cabecera en una entrada de blog, o una miniatura, llamada también thumbnail. En este caso, la imagen pasa a ser un elemento más del markup y ocupa su tamaño real en pantalla, a menos que se le indiquen medidas específicas por CSS o mediante atributos de la etiqueta.

La otra posibilidad es definirlas desde el CSS como imágenes de fondo de un elemento, utilizando la propiedad background-image. Como su nombre lo indica, su funcionalidad es la de servir como complemento decorativo de segundo plano. De esta manera, al no ser un elemento en sí, sino un agregado de otro, no ocupan gráficamente su tamaño original, sino que llenan su contenedor y son mostradas dependiendo únicamente del tamaño de éste. Además del uso clásico decorativo, esta propiedad puede ser utilizada para variados propósitos. Ya que las llamadas a la imagen son manipuladas desde CSS, se pueden conjugar con otras propiedades que permitan mover, cambiar y hasta escalar la misma en el caso de, por ejemplo, cuando el usuario pase el mouse por encima del elemento que la contiene. Por esto suelen ser utilizadas para generar el efecto rollover en logos, entre otros componentes.

El principal problema de las imágenes insertadas en diseños responsivos es que éstas mantienen su tamaño sin acomodarse automáticamente a su entorno. Se mantienen fijas con el tamaño que les fue dado inicialmente, o en su defecto en su dimensión original. Para solucionar este problema, se podría pensar en la utilización de media queries, en donde se le definan nuevos valores de alto y ancho para cada breakpoint. Si bien es posible hacer esto, sería muy complejo realizarlo para cada imagen que haya en el sitio, presente o futura, además de trabajoso de mantener.

Existe una propiedad en CSS llamada max-width – y a su vez también existe max-height, aunque no viene al caso para esta técnica – que establece hasta qué punto debe ese elemento expandirse en ancho. Al fijar ese valor en 100%, es posible asegurarse que las imágenes no sobrepasen el total del ancho de sus contenedores. Es decir, si la fotografía se encuentra embebida dentro de una caja de tamaño menor que la imagen original, ésta se escalará para adaptarse a él. La diferencia de declarar max-width a simplemente width es que, en el caso que el contenedor en alguna circunstancia sea mayor que la imagen, ésta no crecerá hasta ocupar el 100% del ancho de su padre, corriendo el riesgo que se estire, sino que se mantendrá en su tamaño original. Si éste decreciera, por ejemplo al visualizarlo en un dispositivo pequeño, la imagen sí se adaptaría al mismo hasta un máximo del 100%, o cualquier otro valor que se le defina.

Las imágenes tienen todas una relación de aspecto única a sí misma, lo cual significa que por más que se le establezca un ancho variable, el alto no siempre será el total del de su padre. Es por eso recomendable agregar como regla, además de max-width, la propiedad height configurada en auto, lo cual mantiene esta relación dinámicamente, para cualquier tipo de imagen por igual. Esta técnica de adaptabilidad también puede ser utilizada en otro tipo de elementos que compartan estas características, como videos u objetos Flash embebidos.

Este método no aplica, sin embargo, para las imágenes de fondo cargadas desde CSS, ya que no son elementos en sí mismas, como se ha mencionado, sino que dependen del tamaño de su contenedor. Hay dos propiedades que complementan a background-image que pueden ser utilizadas en este caso para adaptar el fondo fluidamente: background-size, introducida con CSS3, que lo escala a valores arbitrarios y background-position, que lo reacomoda en el espacio.

Las opciones comentadas anteriormente son útiles en bastantes casos pero no contemplan un aspecto importante que acarrea el uso de imágenes: el tiempo de carga y el rendimiento de la página. Al servir contenido para dispositivos móviles es fundamental tener en cuenta el peso de éstas. Por más que hayan sido escaladas, la petición al servidor por ese recurso es la misma, es decir, el tamaño original de la imagen es exactamente igual, incluido su peso. Esto puede demorar el tiempo de carga para usuarios móviles, quienes en muchos casos se encuentran restringidos por su conexión a descargar archivos muy pesados. Por este motivo, sería prudente optimizar las llamadas de imágenes, más que solamente limitarse a mejorar el aspecto visual de las mismas en el diseño.

Hay diferentes maneras de servir imágenes selectivamente según el dispositivo desde donde se acceda. La manera de saber cuál, o qué tipo de plataforma es la que realiza la solicitud, mayoritariamente – a menos que se utilize algún complejo sistema de detección mediante tecnologías del lado del servidor – es obteniendo la resolución de pantalla en la cual se está visualizando el sitio. De esta manera, se puede adivinar o realizar una aproximación sobre el entorno del usuario, para entonces ofrecerle una imagen, o mismo un video, acorde a sus posibilidades de descarga.

Si se están cargando imágenes de fondo en CSS, una manera sencilla es definir el background-image dentro de cada media query, dictando distintas imágenes apropiadas para cada una. De esta manera, el servidor únicamente levanta el archivo correspondiente al ámbito de esa consulta. Por ejemplo, en una query que apunta a smartphones, se especificará un archivo optimizado para dichos límites. En una de escritorio, en donde se asume que el usuario no sólo tiene más espacio visual, sino también mejor conexión para su descarga, puede ofrecérsele una imagen de mayor calidad y dimensión.

¿Pero cómo se puede solucionar esto cuando las imágenes están insertadas en el HTML? Al estar incrustadas en la estructura, es decir, en el markup, van a ser peticionadas al servidor cada vez que se cargue la página, sin importar si luego por CSS se ocultan o se achican. Para atacar esta problemática y optimizar la experiencia de usuarios con recursos limitados de acceso, Kadlec (2012) propone una interesante técnica, aunque limitada, que la autora de este Proyecto de Graduación toma como base y formula una mejora para servir imágenes condicionalmente. Si bien se debería utilizar programación del lado del cliente y la solución no es extremadamente semántica, cumple con el objetivo planteado. En teoría, requiere que el desarrollador o diseñador cree una serie de archivos optimizados para una cantidad fija de dispositivos por cada imagen. Por ejemplo, una fotografía debería ser almacenada en equis cantidad de versiones (para ilustrar el tema se toman solamente 3), entonces tendría que crear y almacenar paisaje_smartphones.jpg, paisaje_tablets.jpg y paisaje_desktop.jpg, siendo en este caso paisaje un nombre de referencia y el segundo valor una reseña al entorno. Cada una de ellas debería responder a valores de calidad y tamaño óptimos para el contexto en el que se vaya a utilizar.

En el markup debería agregársele un atributo data al elemento contenedor en el cual se ubicaría la imagen y pasarle un valor referencial de la misma, paisaje en el caso del ejemplo mencionado.

Luego, programáticamente mediante Javascript, se deben recorrer todos los elementos que posean este atributo data, y guardar sus valores en variables. A su vez, se obtienen los tamaños de la ventana gráfica, y se hacen cálculos aproximados para identificar desde qué tipo de dispositivo se está accediendo, ya sea desktop, smartphones, celulares comunes, tablets, entre otros. Una vez finalizadas estas dos tareas, se crea un elemento de imagen a continuación de cada etiqueta anteriormente encontrada. Ya teniendo una referencia sobre qué imagen debe cargar, y en qué resolución, sabe exactamente cual archivo levantar.

Otra situación que puede ocurrir es que el dispositivo de acceso sea uno con tecnología retina. Ésta es implementada por Apple en sus terminales iPhone y iPad más recientes, y ofrece una densidad de pixeles mucho mayor para obtener pantallas de alta resolución. En estos casos, las imágenes que se sirvan deberían a su vez ser de mayor calidad para que se vean con buena definición. Mediante condiciones en las media queries, es posible realizar esta detección para cargar los archivos adecuados.

Estas técnicas, utilizadas en conjunción con las primeramente mencionadas de escalamiento, aseguran una experiencia optimizada para toda clase de usuarios de manera democrática, y permiten cerciorarse que visualmente el sitio se mantenga consistente.