How To Convert Your Webflow 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.

Prerequisites

• 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.
• Kyle from NoCodeCollab also has an excellent tutorial on how to write this using Airtable scripts. If you want to dive into the deep end of Airtable scripting, I will link to the video below.
• In this tutorial, I will not be covering Gallery images to keep things simple but it is possible to do this for gallery images too.
• You will need to signup to Kraken and generate an API key that we can later use.
• Please test this workflow on a copy of your site rather than on a live site if you are still new to all of this automation so that you don’t accidentally lose anything.

Step-by-step instructions

Create a field in the Webflow CMS for your compressed images

1. The first step is to create a field inside of your Webflow CMS where we can store our compressed image
2. If you are also using Airtable, you will need to create an attachment field for storing the image.
3. I do not recommend overriding the existing image in case something goes wrong.

Select the source of your images (Webflow or Airtable)

1. In Airtable, you will be looking for the image URL field of the image you are trying to compress
2. In Webflow, you will be looking for a URL for the Webflow Image.

Make a HTTP request to Kraken

1. Retrieve your API Key and API Secret from Kraken.io (in the API Dashboard)
2. Set the URL to “https://api.kraken.io/v1/url”
3. Set the method to POST
4. Set the body type to Raw and the content-type to JSON(application/json)
5. Copy the request content body

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.

‍

‍

‍

‍