We deployed the image processing technology that scales images to the size of the layout container and converts them to a next-gen format — WebP.
Adaptive Image Loading is already active on all Tilda websites by default, you don't need to enable it. We tested the technology for several months, and are excited to tell you about it.
Let's take a look at all the technologies used to optimize image loading on Tilda websites:
Lazy Load has been active on Tilda for a long time now. The images are loaded gradually as the viewer scrolls down the page, not all at once.
The image is fully loaded because it is on the screen
The loading begins once the image approaches the screen by 700 px
Image has not started loading yet
1. The image is fully loaded because it is on the screen
2. The loading begins once the image approaches the screen by 700 px
3.Image has not started loading yet
CDN, or Content Delivery Network, is a network of servers deployed around the world. It picks the closest server to a visitor’s location and helps deliver images faster. For example, if a viewer is located in Berlin, he or she will receive an image directly from Germany, not from the US.
Tilda automatically converts all website images to WebP. This next-gen format allows compression that reduces image size up to 35% compared to JPEG with no quality loss. You don’t need to upload images to your website in WebP format, Tilda will convert it for you.
We compared the image size difference before and after optimization using this template. The total size of images without Adaptive Image Loading is 8.9 Mb. The total size of images after enabling Adaptive Image Loading is 2.8 Mb
The total size of images reduces 3 times after the optimization
Most modern browsers such as Chrome, Opera, Firefox and others support WebP. While the website is loading, the script checks if the browser supports the format and, if supported, requests WebP images from the server. If not supported, it will deliver original images as they were uploaded – JPEG or PNG. Conversion to AVIF, another new image format offering even better file size reduction, is on the pipeline.
Adaptive image resizing
The technology detects the dimensions of the browser and the layout container, then requests optimized images from the server.
Imagine you have uploaded a 1680 px wide photo into a block with multiple images. The size of each image container is 450 x 300 px. Therefore, a visitor will not receive an original photo but a scaled one according to the container dimensions.
The intelligent system is constantly analyzing website traffic on Tilda. The script prepares images optimized for the most used devices and browsers in advance. This method is more flexible than resizing on the fly: sometimes it is faster to download an original image than to resize and download an optimized one.
Retina displays and slow Internet connection
If a visitor uses a display with increased pixel density, the script will recognize it and request a high resolution image from the server. This way, images will appear crisp on Retina devices.
Although, in case the connection is slow (if a visitor is browsing from the countryside, for example), the system will request a smaller image. This will prevent page load speed from slowing down.
In some cases, Adaptive Image Loading may not work. There are several reasons for this:
You disabled Lazy Load in your website settings.
You disabled Lazy Load for an element in Zero Block.
An optimized version of an image has not been prepared yet. This happens if you have just uploaded a new picture on your website or if you are logging in from a device or a browser for the first time.
Your browser does not support WebP. Find the list of browsers that support the format here.
The difference between the original image size and its optimized version is insignificant; in this case, the system won’t compress nor crop the image.
Adaptive Image Loading is one of the most significant optimization technologies we have implemented in Tilda. We keep working hard to speed up the websites created on the platform. Stay tuned for more updates on Tilda blog, your personal account and social networks.
Create a fast and user-friendly website on Tilda
Don’t miss our latest news – follow us on social networks!