In August, Webflow added an internal compression tool that allows you to convert images to the webP filetype for improved web performance. While this feature is available for static images, it is not yet available for CMS images. Luckily, a solution to this problem is converting your CMS images to WebP.
In this tutorial, I will show you how to bulk convert CMS images from PNG and JPEGs to WebP filetypes to increase the performance of your site. This will be particularly useful to anyone who uses many images in the Webflow CMS, anyone who allows users or clients to upload images to the CMS, or anyone who likes to squeeze that extra bit of performance out their site. At the end of this tutorial, you will see an improvement in how fast your page loads, and you will have a good understanding for how to build a workflow to bulk compress your images and compress your images when a new CMS item is added.
In this tutorial, I will use Airtable as the database for my images sent to the Webflow CMS. Still, if you don’t use Airtable or any intermediary database tool, you can recreate this workflow directory inside of Webflow.
A basic understanding of make.com will be required to recreate this workflow, but if you are a complete beginner, watch along and copy what I am doing and feel free to reach out if you need help.
You can use Zapier instead if you want, use a custom request step and populate the fields in the same way I do in make.com.
Store your compressed image in Airtable or directly in Webflow
If everything worked you will get a response from make.com that looks like this:
You want to keep a careful eye on the status code as will indicate whether or not the API call / compression succeeded. If it did succeed, you will see a 200 response in the status code and you will be able to find a field called “kraked_url”, which we are going to be using to upload our compressed image to Airtable or Webflow.
Tips and best practices
When working with image compression, it's important to keep in mind the following tips and best practices to ensure that the process runs smoothly and that you get the best results.
Add an error handler for when the API calls have an error. Unlike when you are using native modules, the HTTP module will not error if the API call doesn’t succeed, you will need to set a custom path depending on the success status. An error you might run into with Kraken is a 500: Compression issue.
Add the image conversion step to a workflow when a new item is created in Webflow (or Airtable). This initial workflow is designed to update in bulk, but if you also want to run this every time a new record is added, then you will be able to do so.
If you are going to bulk sync images, it is helpful to add a formula that filters out records that have already been synced. This will mean that you don’t rerun compression that already happened. You set that filter in the first step.
Not necessary, but recommended - I store all info about the compression in a notes field in Airtable, so I can see how large the image is. This allows me to spot inconsistencies if necessary.
Run a lightspeed house test to see your performance score pre and post-compression. By comparing the results of the test before and after the compression, you can get a clear understanding of how much the performance of your site has improved.
By following these tips and best practices, you can make sure that your image compression workflow runs smoothly and that you get the best results possible.