El secreto de la optimización de imágenes está en el edge

Y si hoy es importante, más lo será en el futuro. En los próximos cinco años, tres cuartas partes de los usuarios de Internet accederán a los sitios únicamente desde un smartphone, a pesar de lo cual una página web media tarda en cargarse un 87 % más de tiempo en móviles que en dispositivos de escritorio.

Con tanto contenido compitiendo por atraer la atención cada vez más limitada de las personas, incluso las pequeñas diferencias en el rendimiento de un sitio pueden tener un enorme impacto en su crecimiento y capacidad de retención.

A estas alturas, las empresas que dependen de sus sitios web y aplicaciones no deben descuidar la optimización de imágenes. Si las imágenes tardan en cargarse, los usuarios no obtendrán una experiencia óptima y se llevarán una primera impresión negativa que será difícil de hacer olvidar. Para los responsables de TI, la falta de optimización complica los flujos de trabajo internos, aumenta los costes de infraestructura y puede ralentizar el sitio. Con una plataforma de edge cloud, es posible optimizar todos estos procesos de transformación, almacenamiento en caché y distribución del contenido para ofrecer a los usuarios imágenes que requieran el mínimo ancho de banda en cualquier dispositivo que utilicen. Con una solución de optimización de imágenes basada en la nube, ya no es necesario pre-procesar manualmente las imágenes ni pagar más por la infraestructura.

– La optimización de imágenes reduce el tamaño de los archivos para mejorar la velocidad de carga de las páginas, ocupar menos espacio, ahorrar en el ancho de banda de los usuarios finales e incluso mejorar el SEO de un sitio.

Evitar prácticas ineficientes y errores

La optimización de imágenes consiste en reducir el tamaño de los archivos para mejorar la velocidad de carga de las páginas, ocupar menos espacio, ahorrar en el ancho de banda de los usuarios finales e incluso mejorar el SEO de un sitio.

La forma menos práctica de realizar esto es crear de antemano las imágenes para dispositivos y resoluciones comunes y guardarlas en un repositorio central o único, del que se van extrayendo conforme se necesitan.

Sin embargo, crear variaciones distintas de cada imagen no es más que una solución temporal. Los usuarios cada vez utilizan más dispositivos, y aparecen tecnologías con mayor resolución, por lo que es necesario almacenar muchas más versiones diferentes de una misma imagen, que ocupan muchísimo espacio.

Además, el preprocesamiento es una actividad repetitiva y poco importante, susceptible de error humano, que conlleva un uso ineficiente de los recursos de desarrollo. A medida que se van acumulando las variaciones, la suma de los costes de almacenamiento y los costes de salida al origen para recuperar cada imagen empiezan a ser prohibitivos.

En busca de la simplicidad, la velocidad y el control

Las empresas que quieren potenciar la distribución de su contenido y optimizar sus imágenes y tienen a su disposición varias soluciones posibles, cada una con sus ventajas e inconvenientes.

– Plataformas como Fastly transforman y ofrecen imágenes desde el edge, más cerca de los clientes, lo que conlleva menor latencia, al transformar y distribuir imágenes; flujos de trabajo simplificados y menores costes de infraestructura.

Las herramientas de código abierto no requieren una licencia, pero tampoco solucionan los problemas relacionados con el almacenamiento o las tareas que llevan mucho tiempo. Las empresas que las usan no se libran de tener que gestionar el flujo de trabajo de las imágenes, que incluye, entre otros pasos, configurar la solución de código abierto y administrarla de forma ininterrumpida. Además, la ejecución de la optimización de imágenes no es barata, y el coste de las tareas informáticas, de distribución y almacenamiento suele llevar a las empresas a buscar una solución más rentable.

Los servicios especializados de imágenes automatizan el proceso de optimización, pero añaden complejidad al stack y latencia a la red. Además, suponen la entrada de un nuevo proveedor con el que debe lidiar el equipo. Por ejemplo, los clientes que utilizan una red de distribución de contenidos (CDN) tendrían que decidir el contenido que quieren enviar y el lugar al que lo envían. Las imágenes se enviarían a través de un proveedor, y el resto del contenido a través de otro. Tratar con varios proveedores lleva más tiempo y consume más recursos internos, y muchas empresas prefieren que uno solo se encargue de todo.

Algunas CDN pueden gestionar automáticamente el proceso de optimización de imágenes. La CDN almacena en caché el contenido de un sitio y lo guarda en una red de servidores, y los usuarios reciben los archivos desde el servidor que se encuentra más cerca de ellos. Esto reduce la latencia y los tiempos de carga, pero las CDN tradicionales proporcionan a los desarrolladores un control y una visibilidad limitados.

Plataforma Edge cloud. Una funcionalidad de CDN moderna debe ofrecer imágenes bajo demanda y además reducir los costes y mejorar la productividad de los empleados. Ahí es donde entra en juego una plataforma de edge cloud. Plataformas como Fastly transforman y ofrecen imágenes desde el edge. Es decir, trabajan en el borde de Internet, más cerca de los clientes, lo que conlleva una menor latencia al transformar y distribuir imágenes, flujos de trabajo simplificados y menores costes de infraestructura.

Distribución simplificada

Al no tener que ocuparse del procesamiento, es posible liberar recursos internos y dedicarlos a tareas de mayor valor para el negocio. La API automatiza el proceso de redimensionamiento, recorte y configuración de la calidad de salida adecuada, que antes se realizaba manualmente. Tampoco es necesario definir reglas lógicas para el perfil de cada visitante, ya que se puede transferir la lógica de transformación de imágenes a la plataforma de edge cloud. De este modo, se detectarán atributos del visitante, como el dispositivo y la geolocalización, en el borde, y así se tomarán decisiones más rápidas con respecto a la transformación de la imagen. Los formatos de entrada compatibles son JPEG, WEBP, PNG y GIF, mientras que los formatos de salida pueden ser JPEG (línea de base y progresivo) o PNG (8, 24 y 32 bits). Además, los GIF animados pueden transformarse en archivos de vídeo MP4 (H.264), que consumen menos ancho de banda. Gracias a esta funcionalidad, Buzzfeed logró condensar su popular artículo sobre los 100 mejores gifs de todos los tiempos, que ocupaba 250 MB de difícil manejo para cualquier navegador, en un artículo mucho más manejable de 6 MB. 

– Buzzfeed logró condensar su popular artículo sobre los 100 mejores gifs de todos los tiempos, que ocupaba 250 MB de difícil manejo para cualquier navegador, en un artículo mucho más manejable de 6 MB.  

Menor coste

Los sitios web distribuyen las imágenes cuando son necesarias, pero con un espacio de almacenamiento mucho más reducido y con menos peticiones al origen. Esto supone un verdadero ahorro en el coste total de propiedad de un sitio web. Por ejemplo, gracias al Image Optimizer de Fastly, la tienda online Boden redujo el tamaño medio de su contenido estático en un 30%, mientras que la plataforma de comercio electrónico Big Cartel ha conseguido mejorar su velocidad de distribución de varios segundos a 250 milisegundos. Los puntos de presencia de alta densidad con tecnología SSD de la plataforma almacenan más contenido en caché durante más tiempo, lo que permite reducir los costes de tráfico de salida y limita la cantidad de veces que es necesario recuperar las imágenes.

– La tienda online Boden redujo el tamaño medio de su contenido estático en un 30% y la plataforma de comercio electrónico Big Cartel ha conseguido mejorar su velocidad de distribución de varios segundos a 250 milisegundos.

Control total para mejorar la experiencia de usuario

Image Optimizer está integrado en la plataforma de edge cloud de Fastly y eso repercute directamente en una mayor capacidad de retención del usuario, ya que incluso los sitios de comercio electrónico con muchísimo contenido se cargan rápidamente en cualquier parte del mundo. Mientras que otras CDN ofrecen control y flexibilidad limitados, Fastly proporciona una amplia visibilidad a desarrolladores, arquitectos y gestores de TI. Los registros y análisis en tiempo real muestran exactamente cómo interactúan los clientes con las páginas web, y las configuraciones instantáneas permiten editar, desplegar y revertir los cambios en cuestión de segundos, de modo que las empresas pueden ajustar con precisión cada aspecto de su experiencia de usuario.