I didn’t include the default, built-in compression function on Webflow here, because this document was created under the assumption that everyone is already doing that.

*If you need to know more about Webflow’s default compression file, you can watch the official Webflow video here: (link) https://www.youtube.com/watch?v=bE0hj50d_bI*

Here's my simple way of ensuring that I optimise my images. I'm not sure if other Webflow Devs and Specialsts also use this approach, but this is how I do it to maintain website speed and performance effectively.

Analysing Image Performance

A great starting point is Google PageSpeed Insights (pagespeed.web.dev). This tool analyses a website’s performance and highlights areas that need improvement, including image optimisation. It shows how heavy photos can be during loading times, helping identify which images may need to be compressed.

image.png

Steps to Optimise Images

1. Minimising Image Size Before Uploading

To reduce the file size of images without sacrificing quality, I use ReduceImages.com to convert and compress images, typically into PNG format.

image.png

I often use the default settings as well, only I change the format from JPG to PNG:

image.png

The app is free as well. But it does have premium features.

OR