In this article

  1. Why Compress Images in Framer?
  2. Installing Skwiz
  3. Scanning Your Project
  4. Choosing Compression Settings
  5. Preview and Compare
  6. Batch Replace
  7. Advanced Techniques

You've built a stunning Framer site. The layout is perfect, the interactions are smooth, the typography is on point. But when you publish and run a PageSpeed test, the score is disappointing — and the diagnosis is always the same: unoptimized images.

This guide shows you exactly how to compress images inside Framer using the Skwiz plugin, step by step.

Why Compress Images in Framer?

Most designers optimize images before uploading to Framer using external tools. That works, but it has problems:

  • You have to leave Framer, open another tool, export, compress, re-import
  • CMS images uploaded by clients or content editors bypass your optimization workflow
  • You can't see how compression affects images in context of your actual layout
  • It's tedious to do for every image across a multi-page site

Skwiz solves all of these by running directly inside Framer. Scan, compress, preview, and replace — without ever leaving the editor.

Installing Skwiz

  1. Open your Framer project
  2. Go to Plugins in the left sidebar (or press ⌘/Ctrl + /)
  3. Search for "Skwiz"
  4. Click Install
  5. Open Skwiz from your Plugins panel

You can try all features with the free trial — no credit card required.

Scanning Your Project

Skwiz offers five scanning modes depending on what you want to optimize:

ModeWhat It ScansBest For
Current SelectionSelected canvas elementsQuick single-image optimization
Current PageAll images on active pagePage-by-page optimization
Entire ProjectAll images across all pagesFull site audit
Scan CMSAll CMS collection imagesContent-heavy sites
UploadLocal files from your computerPre-optimization before adding to Framer

For your first pass, use Entire Project to get the complete picture.

Choosing Compression Settings

After scanning, set your compression parameters:

  • Format: WebP is the best default choice. 25-35% smaller than JPEG at equivalent quality, with 97%+ browser support
  • Quality: 80 is the sweet spot for most images. Range from 75 (thumbnails) to 85 (hero images)
  • Resize: Set max width to match your layout. 1920px for full-width, 1200px for content columns, 800px for cards
Use Lite mode for one-click optimization with smart defaults. Switch to Advanced mode when you need per-image control over format, quality, effort, and dimensions.

Preview and Compare

Before replacing anything, Skwiz shows a side-by-side preview of every image:

  • Visual comparison — see original vs compressed at full resolution
  • File size reduction — exact bytes saved and percentage
  • Per-image control — adjust settings or skip individual images
  • Zoom and pan — inspect fine details at pixel level

This step is crucial. Never batch-replace without previewing first.

Batch Replace

Once you're satisfied with the previews, hit the batch replace button. Skwiz replaces each image in your Framer project through the API — your layout, positioning, and styling remain untouched. Only the image data changes.

For CMS images, the process is identical. Skwiz writes the optimized images directly back to CMS items.

Advanced Techniques

Presets

Save your preferred settings (format, quality, resize) as a preset. Apply it with one click on future projects — consistency across all your work.

Visual Effects

Skwiz includes built-in effects — brightness, contrast, saturation, blur, sharpening. Apply adjustments before compression for polished results without opening Photoshop.

Smart Advice

Skwiz analyzes each image and provides intelligent recommendations — flagging images that are already optimized, suggesting format changes, and identifying oversized files.

That's it. Five minutes to scan, preview, and replace. Your Framer site goes from 8MB to under 2MB, your PageSpeed score jumps 30+ points, and you never left the editor.