How to Compress and Optimize Images in Webflow

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

1. Compress before upload

Before uploading, compress your images with Squoosh (free, online). Aim for under 500 KB for full-width images and under 200 KB for thumbnails. Webflow automatically converts images to WebP on upload, since 2023.

2. Set the right render size

In the Designer, make sure the image size in your styles matches its actual render size. A 2000px image in a 400px container loads 5x more data than it needs. Use the Max Width field to cap the maximum size.

3. Set up lazy loading

In each image's Settings, set Loading to Lazy for all below-the-fold images. For the hero image (visible right away on load), set it to Eager for better LCP.

4. Always specify width and height

Always define dimensions or an aspect ratio on the image container. Without dimensions, the browser doesn't reserve space before the image loads, which creates CLS (layout shift).

Conclusion

Image optimization is the most accessible performance lever. See also: optimizing images for Core Web Vitals.