How to Quickly Compress and Optimize Thousands of Webflow CMS Images

If you have a lot of images on your site, there's a good chance it's slowing down your load times. Unfortunately, slow load times are bad news if you want to rank highly in Google or keep the attention of visitors to your site.

Compressing (aka optimizing) your images is a great way to make your site run faster, but if you use Webflow, this means downloading all of your collections items and their images, compressing those images in a tool like TinyPNG 20 at a time, and then reuploading them into Webflow.

It can take hours and hours and is extremely tedious.

Luckily, there's a way to do this in bulk using Parabola and the TinyPNG API.

Below, I'll show you how to set up your Parabola flow to automatically pull in the images in a Webflow collection, compress them, and push those compressed images back into your Webflow site. No downloading, no manually uploading images to compress, no manually uploading images back into Webflow.

Overview

Here's an overview of what we're building in Parabola:

First, we pull in a collection from Webflow.

Then we use some "transformations" to select the right collection items and the right item field within that collection.

Then we compress the images.

Then we replace the image in our collection item(s) with a compressed version of the image. This new image will have the exact same dimensions and should appear just as clear as our original image, but the file size can be more than 70% smaller.

Detailed build instructions

I'll be using a Webflow site from my project that helps people get DC Tech Jobs as an example for this build out.

On a blank Parabola canvas, drag in the "Pull from Webflow" step and authorize Parabola to access your chosen site.

Then select the collection in which you want to optimize images. For me, this is the "jobs" collection.

Next, we'll add a filter step to filter out any collection items that:

• Are archived
• Are still just drafts
• Don't have an image in the field we are going to optimize images for.

If you want to test this flow before optimizing images in all of your chosen collection's items, add a "Limit" step next and limit the amount of rows.

Next comes the actual step where we compress the images. We will use the TinyPNG api for this.

How to access the TinyPNG API

Connect an "Enrich with API" step. The request type should be "POST" and your endpoint URL will be . For the body of the request, use the following JSON:

Lastly, you'll need to authenticate this API call. To do so, you'll need an API key from TinyPNG, which you can get here. It’s free to use for up to 500 image compressions per month.

To use that key, you'll set the "Authentication Type" in the Enrich with API step to "Username and Password". Set "api" as your username and your API key as the password. (If you would like to look at TinyPNG's documentation, it's here.)

After that, click "Show updated results".

After it loads, if you scroll to the right on your Enrich with API step, you'll see a bunch of new columns that the TinyPNG API spits back out.

Of interest is the "api.input.size" column, which tells you how large your file size was before (in bytes) and the "api.output.size", which tells you the size of your new file. The last column is "api.output.url" which is the new URL for your compressed image file.

How to Use Parabola to Update a Webflow CMS Collection

To update our Webflow collection with that new, smaller version of the image, we just need to connect a "Send to Webflow" step, connect it to our site and the right collection, and set the fields to update. We'll match the id fields so that we update the same item with the correct image and match our old image field to the new, compressed image URL column that we got back from TinyPNG.

And that's it. Once you've tested it on a limited number of fields, you can remove that limit step and do this in bulk.

Remember, you get 500 compressions free every month.

Of course, you could set up a system in Parabola and/or Zapier to keep any new images you add to a collection in the future to be automatically compressed, so that your image files are never slowing down your site.

If you'd like to talk about this or related (or unrelated) automations, or if you just want the Parabola snippet for this to paste into your canvas, send me an email at brian@briantsdawson.com.