Desde los comienzos del diseño web, la utilización de imágenes ha sido un tema delicado: es uno de los elementos que más recursos consumen y hace la carga de las páginas más lenta. Además, con la llegada del diseño responsive, la construcción de la interfaz se hizo más fluida y ahora las imágenes tienen que adaptarse a todo tipo de espacios.

Para poder entender cada aspecto que debemos tener en cuenta a la hora de usar imágenes en el diseño UI de una web, voy a dividir este post en distintos apartados.

Formato

El formato de una imagen se refiere a la manera en que los datos de ésta se codifican y almacenan en un archivo. Eso quiere decir que lo primero que debemos hacer es distinguir si la imagen que queremos colocar en nuestra web es un mapa de bits o un vector.

Los mapas de bits son imágenes compuestas por píxeles, pequeños cuadrados de color que forman la imagen completa. Cada píxel tiene un color específico y está fijado en su lugar. Cuando haces zoom o escalas una imagen de mapa de bits se ve la pérdida de calidad.

Los vectores son imágenes creadas por fórmulas matemáticas que definen puntos, líneas, curvas y polígonos. Estas fórmulas permiten que la imagen se escale a cualquier tamaño sin perder calidad, ya que los vectores se recalculan para mantener líneas nítidas y formas claras.

Optimización para web

La optimización es un proceso para reducir el peso en megas de una imagen de forma que la carga sea lo más rápida posible sin que notemos la pérdida de calidad.

En lo que respecta a los mapas de bits, hasta hace muy poquito se debía diferenciar entre distintos formatos según lo que ibas a comprimir, por ejemplo, PNG para imágenes planas como gráficos e iconos, PNG 24 si había transparencia o JPG para fotografías. Pero eso se acabó, ahora existen formatos que comprimen las imágenes hasta un 80% mejor que los tradicionales.

El más extendido de los nuevos formatos se llama WebP y está desarrollado por Google. En Photoshop puedes encontrar ya el formato WebP como una opción de guardado más; sin embargo, para hacerlo desde Figma necesitarás un plugin como WebP Exporter.

En el caso de las imágenes vectoriales tenemos que utilizar SVG. Cuando guardamos un archivo SVG desde Illustrator o Figma podemos ver que se trata de código HTML (XML); eso quiere decir que pesa poquísimo y que se inserta con mucha facilidad. Además, permite manipularlo desde el propio código e incluso animarlo.

SVG es el formato estrella para los elementos gráficos de la interfaz como las ilustraciones, iconos y logos.

Dimensiones

El principal problema que hay con respecto al tamaño que ocupan las imágenes en la interfaz web es que el espacio es fluido. Esto quiere decir que dependiendo del lugar que ocupe, la imagen debe adaptarse al espacio cambiando de ancho y alto de forma automática.

Podemos dejar a un lado las imágenes vectoriales, ya que como hemos visto no tienen problema en escalar sin perder calidad por ello. Sin embargo, las fotos que utilicemos para ilustrar nuestro contenido deben adaptarse al espacio que ocupa sin deformarse ni dejar espacios sin rellenar.

Para controlar que no se deforme debemos aplicarle una relación de aspecto concreta. El ratio se decidirá en las fases de prototipado y tendrá que ver con el tipo de imagen, no es lo mismo un retrato que un paisaje.

Además, cuando la imagen va creciendo dentro de su contenedor puede dejar huecos sin rellenar. Para evitar eso, existen técnicas de CSS que automáticamente cubren los espacios sobrantes.

Formas, máscaras y efectos

Por último, hay que destacar que han surgido muchas propiedades CSS que permiten imitar efectos y formas que antes solo se podían conseguir si las diseñabas previamente con Photoshop.

Gracias a estas nuevas técnicas debemos evitar limitar las opciones de una imagen retocándola antes; en vez de eso, la imagen podrá mantener su características de origen para modificarlas a posteriori dependiendo de lo que veamos mejor en el diseño de la interfaz.

En el caso de las máscaras con formas, gracias a técnicas CSS como la que nos proporciona la propiedad clip-path podemos envolver imágenes en todo tipo de formas poligonales.

Con respecto a los efectos y filtros, también se pueden añadir en la fase de desarrollo usando propiedades CSS como mix-blend-mode. Esto permite aplicar un efecto de fusión entre un color plano y una imagen, por ejemplo. Este efecto puede aparecer y desaparecer cuando el usuario pasa el ratón por encima.

En conclusión, las capacidades de uso que tienen actualmente las imágenes en el diseño de interfaces webs no tiene nada que ver con los orígenes del diseño web. Los nuevos formatos, así como las nuevas propiedades CSS, nos brindan en la fase de desarrollo más control sobre las imágenes, ampliando además su utilización en el diseño de interacción.