How do you compress images directly in Webflow?

Why compress your images in Webflow?

Before looking at how to compress images directly in Webflow, let's see what image compression is really for:

• It improves your organic search rankings (SEO), meaning your position in Google search results. Compressing images is only one lever among others for your SEO. (Find out how to improve your organic rankings with our ultimate guide to SEO on Webflow.)
• It reduces your pages' loading time.
• It reduces your Webflow site's carbon footprint. Lighter images mean fewer requests sent to the server, and therefore lower energy consumption.
• It reduces your Webflow site's bounce rate, meaning the share of visitors who land on your site and leave right away, without seeing another page.

The Flowbase tool

Flowbase is a Chrome extension that adds several features to your Webflow interface, such as icons, new components or image compression.

Compressing your images then becomes very simple:

1. Download Flowbase
2. Open the image library of your Webflow project
3. Open an image's settings by clicking the icon in the top right
4. Click "Optimize Image"

Flowbase then creates a duplicate of the image, which is its compressed version.

Here is the process in video.