Review workflow to bulk compress 600+ images in collection list and set alt-texts

Design help CMS
1

Hi all,

I’ve built a site for a client last year, a classic car company, and transferred all the previously sold classics from the old to the new, around 600 items.

Each classic has about 40 images and they weren’t optimized, with filesizes of 500kb per image, some more. From the moment of launch new classics that are for sale are added in .WebP with a filesize of about 150kb.

Since the audience is expanding the bandwidth has grown, it has lead to much more hosting costs. I started to optimize the sold classics manually, by removing 32 of the images per classic, leaving just the best 8 images, and transforming them into WebP with an Alt-text, so also adding SEO value as a bonus.

But my question is if there’s a better way: I watched this tutorial on Sygnal by @memetican and am on the verge of trying the batch optimization tool for the full collection, but just want to check if this is the right workflow, since it’s a critical step:

  • Manual back-up of Webflow
  • Remove 32 images of sold classics
  • Batch optimize to .AVIF, so approximately 570 * 40 = 22.800 images…
  • Add alt-texts to the remaining images manually, since I didn’t find a way to let AI to this to a multi-image field

Can someone review this workflow, since it’s such a large operation that can really mess up a site if something goes wrong. For instance, the tutorial tells that an .AVIF output takes a very long time, so maybe the scope of this project is way too big?

I also found this tutorial by thelazygod on Youtube, where he uses Make to compress images and set alt-texts using AI, but he doesn’t mention that it’s possible for the multi-image field. Since I’ve never used Make or anything like this, I wonder if someone can shine a light on this.

So very curious to hear how you would set this up. Thanks in advance!

Here is my public share link: LINK

2

Hi Tookster, a few thoughts.

Due to the size of your optimization effort, I’d probably do it outside of Webflow. The reason is that your images are large and I’d expect the AVIF conversion to trip up in large batches of large files. Webflow doesn’t have any reporting system for its optimizer so there’s no way for you to know where it had problems and what needs attention.

Also Webflow’s CSV import/export does not support alt text on multi-image fields.
However the API does. For example here’s an update operation setting alt text on an existing multi-image image.

  "fieldData": {
    "images": [
      {
        "alt": "Serene mountain landscape with dramatic clouds at sunset",
        "url": "https://cdn.prod.website-files.com/67b584978f140ef6402c77a0/682c316848481c69d31fcc72_600.jpeg",
        "fileId": "682c316848481c69d31fcc72"
      }
    ]
  }

What I’d do is write a program that walks your collection, pulls your multi-image fields, downloads the media, and converts/re-uploads as AVIFs. As part of that process you can create/update your alt text or even use AI to do it.

The basic setup is straightforward, but you’d need a bunch of pieces;

  • A working list, probably a local CSV file export of the table
  • The AVIF converter, I like xnConvert and it has command line support
  • Possibly a temporary host for your AVIF images so that they can be imported from a public URL
  • Possibly an LLM API service that can do image URL to alt text generation
  • The controller, probably python scripts, handles
    • Parsing and and walking the CSV worklist, and removing items it completes
    • Downloading the images for the current item
    • AVIF conversion using a tool
    • Upload of the compressed image. I think this would be to temporary public storage like an S3 bucket, so that Webflow can access and download it via a public URL
    • Possible LLM API integration to describe the image
    • API call to update the record ( one call per )

You could have it ignore any existing AVIFs and existing alt text, so that if you ever needed to rerun the whole thing you don’t need to worry about redoing existing work.

For future additions/updates, I’d probably just make certain your processes already do a good job of optimizing and adding the alts before you add new records, to keep life simple.

3

Hey, thanks for your reply. Watching your tutorial I was already guessing you would not advise to compress all the images inside of Webflow.
I do have to say you solution is way over my head in technical terms, I don’t have a coding background so have to dive into this. Would this also be possible from a graphic interface, for instance via Make? These kind of environments are more easy for me I guess.

For now thanks a lot, I’m going to discuss this with my client.