17 Sep 24
Las imágenes juegan un papel fundamental para mejorar la experiencia del usuario en sitios web y aplicaciones. Sin embargo, también pueden afectar negativamente el rendimiento si no se gestionan adecuadamente. Ahí es donde entra en juego i3, la solución de optimización de imágenes al vuelo de Transparent Edge.
En esta entrada del blog, te daremos algunos consejos sobre cómo configurar y ajustar i3 para optimizar tus imágenes, reducir el ancho de banda y mejorar la velocidad de carga.
El primer paso para optimizar tus imágenes es ajustar su calidad. i3 te permite hacerlo de manera dinámica, ajustando el nivel de calidad de las imágenes JPG a través del encabezado TCDN-i3-transform. Para reducir el tamaño de las imágenes sin sacrificar demasiada calidad visual, puedes definir un porcentaje que se aplicará a todas las imágenes servidas desde tu dominio.
Ejemplo de configuración en VCL:
sub vcl_recv {
if (req.http.host == "www.mi-dominio.es") {
if (req.url ~ "^/estaticos/imagenes/") {
if (urlplus.get_extension() ~ "(?i)(jpe?g)") {
set req.http.TCDN-i3-transform = "quality:75%";
}
}
}
}Este ejemplo reduce la calidad de las imágenes JPG al 75%, optimizando el uso de ancho de banda y acelerando la entrega.
WebP es un formato de imagen moderno que ofrece una mejor compresión sin perder calidad visual. i3 puede convertir dinámicamente tus imágenes a WebP, siempre que el navegador del usuario sea compatible. Esta transformación se realiza automáticamente al detectar el encabezado Accept: image/WebP.
Ejemplo de configuración en VCL:
sub vcl_recv {
if (req.http.host == "www.mi-dominio.es") {
set req.http.TCDN-i3-transform = "auto_webp";
}
}
Además, puedes ajustar la calidad de las imágenes WebP utilizando el siguiente formato: auto_webp:<porcentaje>%. Si no defines un porcentaje, se aplicará un valor predeterminado del 80%.
Otra opción crucial para optimizar imágenes es limitar su tamaño máximo. Esto es útil para evitar que imágenes de alta resolución y gran tamaño afecten la velocidad de tu sitio web. i3 permite restringir el tamaño a través del encabezado TCDN-i3-transform, aplicando una degradación progresiva de la calidad hasta alcanzar el límite definido.
Ejemplo de configuración en VCL para limitar a 1 Mb:
sub vcl_recv {
if (req.http.host == "www.mi-dominio.es") {
if (req.url ~ "^/estaticos/imagenes/") {
set req.http.TCDN-i3-transform = "max_length:1m";
}
}
}
De esta forma, las imágenes no excederán 1 MB de tamaño, lo que optimiza el rendimiento general de tu sitio.
i3 también ofrece funcionalidades avanzadas como el cropping inteligente, que ajusta las dimensiones de la imagen de acuerdo con los parámetros que hayas fijado, garantizando que la imagen no exceda los límites definidos.
Además, puedes utilizar strips, una técnica de superposición que permite componer imágenes a partir de una original, lo que resulta útil para crear versiones adaptadas a diferentes necesidades.
Optimizar imágenes al vuelo no solo mejora la experiencia de usuario, sino que también reduce significativamente los costes asociados a la CDN, disminuye el uso de ancho de banda y mejora el posicionamiento en motores de búsqueda al acelerar el tiempo de carga de tus sitios web.
Al transformar las imágenes directamente en el edge, se elimina la latencia causada por las múltiples peticiones al servidor de origen, lo que reduce aún más los tiempos de respuesta. Esto no solo resulta en una carga más rápida de los contenidos, sino también en una mayor satisfacción de los usuarios y mejores resultados en SEO. En definitiva, mejores Core Web Vitals.
Nuestro optimizador de imágenes i3 es fácilmente integrable con cualquier CDN. A través de nuestra API, podrás implementar cambios rápidamente y comenzar a optimizar tus imágenes con tan solo algunas modificaciones en tu configuración.
Si necesitas ayuda o tienes alguna consulta, no dudes en contactar con uno de los expertos de Transparent Edge. Puedes abrir un ticket en tu dashboard o enviar un correo a help+cdn@transparentedge.eu. ¡Estaremos encantados de echarte una mano!
Compartir:
