18 Jun 24
The perfect storm
It could be the title of a movie, but it isn’t. Let’s put ourselves in context: It’s an ordinary summer […]
Settings to optimize images in real time with i3
17 Sep 24
Images play a vital role in improving user experience on websites and apps. However, they can also negatively impact performance if not managed properly. That’s where i3, Transparent Edge’s on-the-fly image optimization solution, comes into play.
In this blog post, we’ll give you some tips on how to set up and tune i3 to optimize your images, reduce bandwidth, and improve loading speed.
The first step to optimize your images is to adjust their quality. i3 allows you to do this dynamically, by adjusting the quality level of JPG images via the TCDN-i3-transform header. To reduce image size without sacrificing too much visual quality, you can define a percentage that will be applied to all images served from your domain.
VCL configuration example:
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%";
}
}
}
}This example reduces the quality of JPG images to 75%, optimizing bandwidth usage and speeding up delivery.
WebP is a modern image format that offers better compression without losing visual quality. i3 can dynamically convert your images to WebP, provided the user’s browser supports it. This transformation is performed automatically by detecting the Accept: image/WebP header.
VCL configuration example:
sub vcl_recv {
if (req.http.host == "www.mi-dominio.es") {
set req.http.TCDN-i3-transform = "auto_webp";
}
}
Additionally, you can adjust the quality of WebP images using the following format: auto_webp:<percentage>%. If you do not define a percentage, a default value of 80% will be applied.
Another crucial option for optimizing images is limiting their maximum size. This is useful to prevent high-resolution, large images from affecting the speed of your website. i3 allows you to restrict size via the TCDN-i3-transform header, applying a progressive degradation of quality until the defined limit is reached.
Configuration example in VLC to limit to 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";
}
}
}
This way, images won’t exceed 1MB in size, which optimizes the overall performance of your site.
i3 also offers advanced features such as smart cropping, which adjusts the dimensions of the image according to the parameters you set, ensuring that the image does not exceed the defined limits.
In addition, you can use strips, an overlay technique that allows you to composite images from an original, which is useful for creating versions adapted to different needs.
Optimizing images on the fly not only improves user experience, but also significantly reduces CDN costs, decreases bandwidth usage, and improves search engine rankings by speeding up your websites’ loading times.
By transforming images directly at the edge, the latency caused by multiple requests to the origin server is eliminated, further reducing response times. This not only results in faster loading of content, but also higher user satisfaction and better SEO results. In short, better Core Web Vitals.
Our i3 image optimizer is easily integrated with any CDN. Through our API, you can quickly implement changes and start optimizing your images with just a few tweaks to your configuration.
If you need help or have any questions, feel free to contact one of Transparent Edge’s experts. You can open a ticket in your dashboard or send an email to help+cdn@transparentedge.eu. We’ll be happy to help!
Compartir:
