← All blog posts

Webflow SEO Hack: Convert Your CMS Images to WebP

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.

January 11, 2023

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
{
    "auth": {
        "api_key": "",
        "api_secret": ""
    },
    "url": "{{1.`Profile Picture`[].url}}",
    "wait": true,
    "lossy": true,
    "webp": true
}

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.

‍

‍

‍

‍

Use the code

Copy

Dive Deeper with the MVMP Marketplace Course

Learn how to build the essential features for your online marketplace. Start creating the most essential features for your no-code marketplace and start scaling your site

Learn more →
Subscribe to the newsletter!

Get notified when I publish my next video or blog

😘 Got it!
Oops! Something went wrong while submitting the form.
Introducing Relume Ipsum: Revolutionize Your Web Design Process with AI-Generated Copy

Introducing Relume Ipsum: Revolutionize Your Web Design Process with AI-Generated Copy

Ready to take your web design game to the next level? Discover how Relume Ipsum's AI-powered plugin can revolutionize your content creation process. Read our blog post now!

How to Fix Common Webflow Performance Issues with Lighthouse

How to Fix Common Webflow Performance Issues with Lighthouse

Are you experiencing performance issues on your Webflow site? Lighthouse can help you identify and fix common problems such as slow loading times, poor server response, and lack of caching. Learn how to use Lighthouse to improve your Webflow site's performance and enhance the user experience.

Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

I'll show you how I used the power of GPT-3 by OpenAI, @Wized and Webflow to create an app that generates custom cover letters for job listings. If you are looking for GPT-3 business ideas, feel free to use the same process to set up your own site.

Optimizing Webflow Designs Using Line Clamping

Optimizing Webflow Designs Using Line Clamping

Using line clamps in Webflow allows for the creation of visually appealing layouts by limiting the number of lines of text displayed within an element.

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

In this post, we'll be walking through the process of using Finsweet Sort and Filter to implement search and basic filtering functionality for our book collection. We'll also be using Data Fetcher to import Google Analytics page views and incorporate them into our Webflow site, allowing us to sort our books by popularity.

ChatGPT đŸ€ No-Code - How to create and schedule social posts with AI

ChatGPT đŸ€ No-Code - How to create and schedule social posts with AI

As part of the booknotes.ai series, I will show you how to build a workflow for creating and scheduling social media marketing posts. For this example, I will be using Instagram, but you can set up this workflow for whatever other social media platform you want to use, like Twitter, LinkedIn, etc. In the first part of this series, I showed you how I created booknotes.ai, a book recommendation service created with AI.