¿Qué es la optimización de imágenes?

La optimización de imágenes es un proceso que permite modificar y distribuir imágenes de alta calidad con el formato, el tamaño y la resolución ideales para el dispositivo desde el que se accede a ellas. Además, se trata de mantener el tamaño de archivo más pequeño posible sin que se aprecie la pérdida de calidad en las imágenes.

¿Parece imposible? Pues no lo es y, de hecho, resulta fundamental para que un sitio web responda como es debido. Los usuarios visitan los sitios web desde dispositivos móviles y ordenadores personales, para lo cual utilizan distintos navegadores, y quieren que su respuesta sea intachable. La optimización de imágenes es una de las claves para lograrlo, puesto que puede agilizar la distribución y mejorar el posicionamiento en los motores de búsqueda.

Por qué es importante la optimización de imágenes

La optimización de imágenes mejora en gran medida la experiencia de visualización, pero no es imprescindible. Como mínimo, debes elegir un formato que permita mostrar las imágenes correctamente en cualquier tipo de dispositivo. También debes tener en cuenta la resolución y la codificación de las imágenes, dos aspectos que afectan tanto a la calidad como al tamaño. 

Junto con la transformación física de tus imágenes, debes prestar atención al nombre de archivo, las etiquetas ALT y los metadatos de las imágenes si quieres mejorar la optimización para buscadores (SEO).

Aunque puedes llevar a cabo esta tarea por tu cuenta utilizando herramientas externas, será más difícil, cara y laboriosa a medida que vaya creciendo tu negocio y necesites ampliar la escala, como si de una imagen se tratase. Una solución de optimización de imágenes, preferiblemente basada en el edge, puede automatizar y ampliar las tareas necesarias para optimizar las imágenes de tu sitio web, además de reducir o eliminar los gastos en recursos informáticos y la carga de trabajo manual. Y si encima tienes una CDN, puedes almacenar las imágenes optimizadas en caché para agilizar su distribución entre los usuarios.

Cómo funciona la optimización de imágenes

Una solución de optimización de imágenes te permite subir imágenes de alta resolución y cambiar una serie de ajustes para que se visualicen de la forma más eficiente en tu sitio web. Con una de estas soluciones, que suelen estar disponibles como complementos o extensiones para sistemas de gestión de contenidos o como servicios independientes, locales u online, puedes definir ajustes de transformación y aplicarlos en el lado del servidor antes de distribuir las imágenes.

Estas son algunas de las prácticas más extendidas para optimizar las imágenes antes de su distribución:

• Utilizar la detección instantánea de dispositivos para enviar las imágenes que mejor se adapten a las pantallas de los usuarios.

• Comprimir las imágenes para optimizar su distribución en función de la plataforma, la conectividad, la compatibilidad y otros factores.

• Ampliar o reducir las imágenes para que tengan un tamaño concreto.

Cuando carga tu sitio web y solicita una imagen, el cliente web del usuario se sirve del CSS del sitio para determinar qué versión de la misma es la más adecuada para el dispositivo. A continuación, solicita a tus servidores una imagen específica con esos parámetros, y la solución de optimización de imágenes aplica la transformación a la imagen antes de que su versión optimizada esté disponible.

En lugar de predecir los dispositivos que pueden acceder a tu sitio web y definir parámetros para cada caso, puedes utilizar API de JavaScript para identificar de manera programática información sobre el servidor del cliente y su número de versión con la finalidad de solicitar la transformación óptima.

Incluso puedes acompañar una solución de optimización de imágenes con un servicio de CDN para agilizar aún más el envío de imágenes optimizadas. Una vez atendida la primera petición de una imagen, tanto la original como su versión ya transformada se almacenan en caché en el servidor de la CDN, por lo que las siguientes peticiones de la misma transformación pueden enviarse desde ahí sin necesidad de modificaciones. Las peticiones de otras transformaciones se atienden utilizando la imagen original almacenada en caché, lo que reduce el tráfico y la sobrecarga en el origen.

Ventajas de las soluciones de optimización de imágenes

Una solución de optimización de imágenes puede ayudarte a ahorrar tiempo, reducir el gasto en infraestructura, ofrecer una experiencia de uso superior y mejorar el SEO.

1. Optimización de procesos

Optimizar y mantener las imágenes de tu sitio web puede ser una tarea ardua y laboriosa si hay un número elevado de ellas. En la actualidad, crear diez o más versiones de una imagen, todas ellas en archivos que se adaptan a las resoluciones de pantalla más comunes, está a la orden del día. Una solución de optimización de imágenes puede ahorrar tiempo al crear las imágenes que necesitas a partir de un único archivo de origen de alta calidad. Si incorporas una solución de estas características a tus procesos, esto puede llevarse a cabo de manera automática. ¡Se acabó eso de crear archivos de imagen a mano y utilizar scripts de preprocesamiento!

2. Menos costes

Una solución de optimización de imágenes también contribuye a reducir el gasto en infraestructura porque no hace falta almacenar distintas versiones de cada archivo en el servidor ni invertir en recursos informáticos para hacer las transformaciones. Y usar un servicio de CDN capaz de distribuir imágenes desde el almacenamiento en caché y adaptar su escalabilidad a tus necesidades puede ahorrar aún más dinero al reducir el coste de tráfico de salida.

3. Distribución más rápida

La principal ventaja de combinar una solución de optimización de imágenes con una CDN es que se agiliza la distribución. Una CDN permite enviar las imágenes desde el almacenamiento en caché, más cerca de los usuarios, por eso acelera la distribución y la carga de un sitio web.

Esto no solo es importante para la experiencia de uso, sino también para el SEO. Google y otros buscadores analizan tu sitio web y tienen en cuenta la velocidad de carga, entre otros factores, para determinar su posición en los resultados. Si las imágenes hacen que su sitio se cargue más despacio, el buscador puede darle menos prioridad que a otros. Contar con imágenes optimizadas garantiza que los usuarios reciban las versiones correctas para sus dispositivos y que estas se muestren más rápido, lo cual es bueno para el SEO.

Adoptar prácticas recomendadas en lo relativo a la optimización de imágenes ayuda a las empresas a mejorar considerablemente los tiempos de carga de sus sitios web, reducir la carga en el origen y, en última instancia, tener más satisfechos a los usuarios. La relación que existe entre la optimización de imágenes y el posicionamiento en buscadores pone de manifiesto la importancia de hacerlo. Los usuarios quieren disfrutar de experiencias cada vez más rápidas y fluidas, por lo que la optimización de imágenes es una de las claves para tener una ventaja competitiva en el panorama digital.

Tienes más información sobre la optimización de imágenes en los recursos de abajo.

• Página de producto con demostración en directo: /products/image-optimization

• Ebook sobre Image Optimizer: https://learn.fastly.com/es-network-services-Performance-ebook-Image-Optimization.html 

• Entrada del blog sobre la automatización con Image Optimizer: /blog/its-about-time-to-value-announcing-self-service-image-optimization

• Testimonio de cliente: /video/fastly-image-optimizer 

Tutorial de Image Optimizer de Fastly: https://docs.fastly.com/en/tutorials/fastly-io