How to Optimize Images in Webflow for Core Web Vitals

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to optimize images in Webflow to improve your Core Web Vitals.

1. Upload your images in the right format

Webflow automatically converts your JPEG and PNG files to WebP on upload, since 2023. Always upload your images in the best possible quality: Webflow handles compression and conversion for you. For images with transparency, upload PNG files — Webflow converts them to WebP with an alpha channel.

2. Set Loading to Eager for above-the-fold images

In the Designer, select your hero image or any element that’s visible right away when the page loads. In Settings, set Loading to Eager. All other images should be set to Lazy. This is the biggest lever for improving LCP.

3. Always specify width and height

Missing image dimensions are the main cause of CLS (Cumulative Layout Shift). In Webflow, set fixed dimensions or an aspect ratio on the image container using Aspect Ratio in the styles.

4. Use responsive sizes

Webflow automatically generates multiple versions of your images (500w, 800w, 1080w, 1600w, 2000w) and serves them through the srcset attribute. Check your page source to make sure the srcset attribute is present on your important images.

5. Compress before upload if needed

For very heavy images (>2 MB), compress them before upload with Squoosh or TinyPNG. Aim for under 500 KB for full-width images and 200 KB for thumbnails.

Conclusion

Images account for an average of 60% of a web page’s weight. Use cases:

• Portfolio pages with lots of high-resolution images
• Landing pages with a strong hero image
• Blogs with images in CMS articles