Framer's CMS is powerful for managing content at scale - blog posts, portfolio projects, product pages, team members. But as your collection grows, so does a hidden problem: image bloat.

A 200-item CMS collection with 3 unoptimized images per item can easily reach 2GB of total image data. Multiply that by page views and you're looking at serious bandwidth costs and sluggish load times.

Here's how to keep your CMS images lean and your site fast.

The CMS Image Problem

Unlike regular page images (which designers might occasionally optimize), CMS images are typically uploaded by content teams, clients, or integrated from external sources. They arrive in whatever format and size the source provides - often:

  • 4000-6000px wide photos straight from cameras
  • Marketing screenshots saved as PNG (multiple MBs each)
  • Stock photos downloaded at maximum resolution
  • Logo files saved as full-page PNGs instead of cropped SVGs
The math: 150 CMS items × 3 images × 3MB average = 1.35 GB of images. If your site gets 1,000 visitors/month who each load 5 items, that's 22.5 GB of bandwidth monthly.

Best Practice 1: Set a Format Standard

Choose WebP as your default CMS image format. It delivers 25-35% smaller files than JPEG at equivalent quality, with 97%+ browser support. The only exception: logos and icons that need transparency with perfectly sharp edges (use SVG or PNG for those).

Best Practice 2: Define Maximum Dimensions

Your site's max content width determines the maximum useful image dimension. Common settings:

Use CaseMax WidthReasoning
Hero / Full-width1920pxCovers 99% of desktop screens
Content images1200pxTypical content column width × 2 (retina)
Thumbnails / Cards800pxCard width × 2 (retina)
Avatars / Icons200pxSmall display, no need for large source

Best Practice 3: Quality Sweet Spots

Not every image needs the same quality level. Here's a guide:

  • Hero images / portfolio work: Quality 82-88 (visible quality matters)
  • Blog post images: Quality 78-82 (good balance)
  • Thumbnails / cards: Quality 72-78 (small display, less visible)
  • Background textures: Quality 65-75 (low detail, big savings)

Best Practice 4: Batch Optimize on Upload

Make image optimization part of your content workflow. After uploading new CMS items:

  1. Open Skwiz in your Framer project
  2. Use Scan CMS to scan the relevant collection
  3. New/unoptimized images will be loaded
  4. Apply your preset (format + quality + max dimensions)
  5. Preview, then batch replace
Pro tip: Use Skwiz's "Remember Settings" feature to save your preferred quality and format settings. This makes repeat optimizations a one-click workflow.

Best Practice 5: Regular Audits

Schedule a monthly "image health check":

  • Run Skwiz's project scanner to catch any new unoptimized images
  • Check Google PageSpeed Insights for any new LCP warnings
  • Review bandwidth usage in your hosting dashboard
  • Remove unused CMS items and their associated images

How Skwiz Handles CMS at Scale

Skwiz is specifically designed for CMS-heavy Framer projects:

  • Collection-level scanning - scan an entire CMS collection in one click
  • Per-item image loading - processes up to thousands of CMS items
  • Batch replace via Framer API - replaces images directly in CMS items without manual re-uploading
  • Memory-managed processing - handles large batches without crashing the plugin