I thought I'd optimized every image on my Framer sites. Then I found the ones hiding in my CMS.
Hey everyone,
I've been building Framer sites for a couple years now, and before every launch I'd do the same ritual: go page by page, check file sizes, compress the heavy stuff, convert to WebP, add alt text. Tedious but manageable.
Then on one project I noticed a background image inside a component instance I'd never actually clicked into, still a fat 2MB PNG, completely untouched. And a bunch of CMS collection items with images that don't even show up when you're just scanning pages visually. I'd been doing this "thorough" audit for two years and still missing a chunk of every project. π
So I built a plugin to actually cover everything: pages, components, CMS collections, all of it, in one panel. Cleaned it up, used it on client work for a while, put it on the Marketplace as Image Manager.
What it does now:
π Scans your whole project - pages, components, and CMS collections (image fields + galleries), not just what's visible on canvas
π Groups everything by where it actually lives, so you're not hunting through pages
π« One entry per image, no duplicates from desktop/tablet/mobile breakpoints or component variants
β Flags issues at a glance - oversized files, missing alt text
β‘ One-click optimize: resize + convert to WebP, applied straight to your project
β Bulk actions for fixing a whole batch at once instead of one by one
β Inline alt text editing for SEO and accessibility
Genuinely curious how the rest of you handle this: by hand, external tools like Squoosh/TinyPNG, or just letting it slide? And if there's something that would actually save you time here, I'm taking notes. π
Full disclosure, it's my own plugin, here if you want a look (β¬7, lifetime): [Link]
Happy to answer anything π
