In Webflow, making images responsive is so straightforward that we sometimes forget not only to think about how the web works overall, but also, and most importantly, to optimize them according to Google's metrics (especially regarding LCP, for instance).
In this article, you will find out how you should optimize images on your website to avoid poor rankings in search engine results, according to Google.
Image Loading: "Auto: defaults to browser" VS "Lazy-Load"
There are two ways to load images in Webflow. To optimize page loading times, take the time to understand how each option works.
Auto: default to browser
This loading method indicates that the specified element is a priority load for this page of your site. You use it when the image is at the top of your page, thus immediately visible to the visitor. You are informing search engines like Google: this image should be loaded first because it needs to be visible to users right away on this page.
Lazy: loads on scroll
Lazy loading is a fantastic way to make your pages faster. It allows your site's images to be loaded only when they are in the user's viewport, so they are not loaded randomly by the browser.
Best Practices
- Use "auto: default to browser" for images in the "header or hero" section = the first section of your page
- Use "lazy-load" for the rest of the images on your page to enhance Lighthouse performance
By setting your images with these 2 best practices, you have already taken a significant step toward optimizing your on-page loading speed, and therefore your SEO :)
Core Vitals Performance Optimization
Specify explicit width and height for your images
You make use of tools like Lighthouse Core Vitals and Google PageSpeed Insights to test your website's performance, and have you ever received this message: "Image elements do not have explicit width and height"?
Here’s how to fix this issue to finally improve your site's performance on the page.
In recent years, the development of CMS platforms such as Webflow, WordPress, and Wix has made responsive image display easy, leading developers to adopt bad habits.
What bad habits?
The habit of setting images to auto or 100% width and/or 100% height in a <div> block.
However, this practice is complex for search engines like Google to manage because they must preload space for these images. Without precise data, they pre-load very large and tall spaces (negatively impacting LCP). For example, they might pre-load 4000 pixels by 4000 pixels when your image might simply be a 32x32 icon… requiring a much smaller load.
The best practice:
Define a fixed width and a fixed height in REM or pixels for all your images.
Be mindful of your site’s responsive pages
Now that you have defined an explicit size for your images, ensure that the image is also adaptive by adjusting its size for devices with lower resolutions (tablets and mobiles).
To conclude
- Define the ideal loading time: lazy or auto default
- Set an explicit and measurable size for all your images
Hope it helps.
