Framer Image Optimization Checklist: Ship Every Project Under 2MB

Every Framer project deserves a quality check before it goes live. Your layout is pixel-perfect. Your interactions are polished. But if your images aren't optimized, your visitors are paying the price in load times — and you might be paying it in hosting costs.

This is a practical checklist you can run through in 10 minutes before hitting publish.

Why 2MB Matters

Google's research shows that 53% of mobile visitors leave sites that take longer than 3 seconds to load. Page weight is the single biggest factor in load times, and images are the single biggest component of page weight.

A 2MB total page weight — including all images, fonts, scripts, and styles — generally loads in under 2 seconds on a good 4G connection. That's the target.

Most unoptimized Framer sites land somewhere between 5MB and 15MB. Getting under 2MB is realistic with proper image optimization.

Pre-Launch Checklist

Go through each item before publishing:

1. Audit Image Sizes

• Open Skwiz and run a full project scan
• Check: are any individual images over 500KB?
• Check: what's the total size of all images on your homepage?
• Flag anything over 1MB per image — that's almost always too large for web

2. Check Image Dimensions

• Hero images: do they need to be wider than 1920px? Usually not
• Thumbnails and cards: are they being served at their display size?
• Background images: these are often the worst offenders — 4000px wide when the container is 1200px

3. Choose the Right Format

4. Compress Everything

• Set quality to 80 for WebP — this is the sweet spot for most photos
• Use Skwiz's batch mode to process all images at once
• Preview before replacing: make sure nothing looks degraded

5. Verify Total Page Weight

• After optimization, check your homepage again in DevTools
• Total transferred should be under 2MB
• LCP image should be under 200KB if possible

CMS-Specific Checks

If your Framer project uses CMS collections, add these to your checklist:

• Scan all collections — not just the ones on your homepage
• Check cover images — these appear in listing pages and can multiply your bandwidth if they're large
• Set guidelines for clients — if clients will be adding content, give them maximum file size recommendations (e.g., "upload images under 2MB, we'll optimize from there")
• Optimize after import — if you migrated content from WordPress, Webflow, or another platform, those images are probably unoptimized

Format Decision Guide

When in doubt, follow this:

1. Is it a vector graphic or icon? → SVG
2. Does it need transparency? → WebP lossless or PNG
3. Is it a photograph? → WebP lossy, quality 75-85
4. Is it a screenshot with text? → WebP lossless

WebP is the default recommendation for almost everything on the web in 2026. Browser support is effectively universal.

Common Mistakes

These come up repeatedly in Framer projects we've seen:

• Uploading retina exports at 2x without compression — a 2x export at quality 100 can be 4-8x the necessary file size
• Using PNG for photos — PNG is lossless, which means huge file sizes for complex images. Use WebP or JPEG for photos
• Ignoring CMS images — your homepage might be fast, but each CMS entry page could be 5MB if the collection images are unoptimized
• Optimizing once but not maintaining — new content means new unoptimized images

Testing Your Results

After running through this checklist:

1. Publish your site
2. Run PageSpeed Insights on your homepage
3. Check the "Properly size images" and "Serve images in next-gen formats" audits
4. Both should pass. If they don't, you missed something — go back to step 1

Aim for a Performance score above 85 on mobile. With proper image optimization plus Framer's built-in delivery optimizations, scores in the 90s are achievable on most sites.