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 active on all Tilda websites by default, no need to do anything 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
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
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.
NEW
WebP Support
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.
JPEG — 1680х1120px, 166 Kb
WebP — 1680х1120px, 78.6 Kb
8.9 Mb
2.8 Mb
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, in JPEG or PNG. Conversion to AVIF, another new image format offering even better file size reduction, is in the pipeline.
NEW
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.
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.
Suppose a visitor accesses a website from a phone. To load a website cover on this device, the script will request a cropped image at correct resolution adapted to the screen.
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.
NEW
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.
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:
1
You disabled Lazy Load in your website settings.
2
You disabled Lazy Load for an element in Zero Block.
3
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.
4
Your browser does not support WebP. Find the list of browsers that support the format here.
5
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 Fast and User-Friendly Websites on Tilda
Don’t miss our latest news, follow us on social media!
