← 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.
🚀 Webflow Apps - Reviewing Webflow's Biggest Update This Year!

🚀 Webflow Apps - Reviewing Webflow's Biggest Update This Year!

Explore Webflow's revolutionary app updates and API changes that enhance design capabilities and user experience, featuring standout apps like Unsplash, Jasper AI, Finsweet Table, and Memberstack.

🤯 Relume's AI Site Builder is UNBELIEVABLE!

🤯 Relume's AI Site Builder is UNBELIEVABLE!

Relume has once again taken things to the next level AGAIN. This time with their AI Site Builder tool that will allow you to turn a simple prompt into a sitemap and wireframes with AI generated copy in seconds.

🚀 6 Tips for Building Webflow Sites More Efficiently

🚀 6 Tips for Building Webflow Sites More Efficiently

Discover the secrets to enhancing your Webflow design process with these 6 essential tips! In this video, we'll walk you through time-saving techniques, productivity-boosting hacks, and valuable strategies to help you build Webflow sites more efficiently. From style guides to on-page optimization, these expertly-crafted tips will empower you to work smarter, create beautiful and responsive websites faster, and take your Webflow skills to new heights. Don't miss out on unlocking your full Webflow potential – tune in now to elevate your website-building experience!

Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Join us for the final installment of our series as we explore the creation of custom open graph images for each landing page. In Part 3, we'll use Placid to automatically generate visually appealing open graph images with custom screenshots and text. Enhance your website's social media presence and elevate your landing pages with these custom images. Complete your automation journey and unlock your website's full potential with this innovative workflow.

Supercharge Your Webflow Landing Pages: Automatically Updating Webflow CMS Items (Part 2)

Supercharge Your Webflow Landing Pages: Automatically Updating Webflow CMS Items (Part 2)

Continue your automation journey with Part 2 of our series! In this video, we'll guide you through setting up a workflow that automatically updates Webflow CMS items whenever any of your titles have been created or updated. We'll use Airtable Automations to trigger a make.com workflow that seamlessly updates your Webflow items. Streamline your website-building process and keep your landing pages up-to-date with this powerful workflow.

Supercharge Your Webflow Landing Pages: Automated Title Tags, Meta Descriptions, and More (Part 1)

Supercharge Your Webflow Landing Pages: Automated Title Tags, Meta Descriptions, and More (Part 1)

Discover how to optimize your landing pages with automated workflows! In Part 1, we'll explore how to use OpenAI's GPT-4 language model to automatically generate SEO-optimized Title Tags, Meta Descriptions, H1 and H2 headings for your landing pages. Enhance your website's search engine visibility and boost your SEO efforts with these powerful techniques.