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.
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.
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:
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.
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.
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 email@example.com.
👋 Looking to no-code freelance?
I'm putting together a list of companies that could use some help.
I'm putting together a list of leads that you could pitch. Included is companies that raised funding in April 2021 (money to spend) and what technologies they use (ideas for providing Zapier, Parabola, Integromat, or other services).
The list is full of detailed info, but I don't want these companies to get overwhelmed by pitches, so only a limited number of freelancers will get access.
Put in your email below and I'll send it your way.
If you want it, put your email in and I'll send it your way (free).
3 left at free price tier. Next price: $15