How to Use Skwiz

Installation

Skwiz is available on the Framer Marketplace. To install:

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

First Run

When you open Skwiz for the first time, you'll see the main dashboard with five loading options:

• Upload Images — drag and drop or browse for local files
• Current Selection — compress images from your current selection on the canvas
• Current Page — scan and load all images on the current page
• Entire Project — scan every page in your project for images
• Scan CMS — scan all CMS collections and their image fields

Select any option to load images into the processing queue.

Lite vs Advanced Mode

Skwiz offers two modes to match your workflow:

Lite Mode

One-click optimization. Skwiz applies smart defaults — WebP format, quality 75, auto-resize. Great for quick passes when you don't need fine-grained control.

Advanced Mode

Full control over every parameter. Choose format, quality, effort, dimensions, and encoder-specific settings for each image or apply them to the entire batch. Includes side-by-side preview.

Loading Images

Skwiz supports five methods for loading images into the processing queue:

Current Selection

Select one or more image elements on your Framer canvas, then click "Current Selection." Skwiz will extract the source images from the selected frames.

Current Page

Scans the active page for all image elements, including those inside components and nested frames. Useful for optimizing a single landing page or section.

Entire Project

Scans every page in your project. This can take a moment for large projects but gives you a complete view of all images that could be optimized.

Scan CMS

Connects to your Framer CMS and scans all collections for image fields. Perfect for projects with large catalogs — portfolios, real estate listings, e-commerce products.

Upload

Drag and drop or browse for local image files. Useful for pre-optimizing images before adding them to your Framer project.

Compression Settings

In Advanced mode, you have full control over compression parameters:

• Quality — 0 to 100. Lower values = smaller files. For most web images, 65-80 is the sweet spot.
• Effort (WebP/AVIF) — 0 to 6 level tradeoff. Higher effort takes longer but produces smaller files through more complex encoding.
• EXIF Preservation — Choose whether to keep metadata like camera info and GPS data.
• Chroma subsampling (JPEG) — Reduces color data for additional savings. Options: 4:4:4 (none), 4:2:2, 4:2:0.
• Progressive (JPEG) — Enables progressive rendering, where the image loads in increasing quality passes.
• Lossless mode (WebP/PNG) — Byte-for-byte identical output. Best for graphics with text or high-contrast UI elements.

Format Selection

Skwiz uses industry-standard WASM encoders to provide the best possible compression ratios:

• WebP (libwebp) — The gold standard for web images. Faster, smaller, and fully compatible with modern Framer projects.
• AVIF (@jsquash/avif) — Next-generation compression. Often 30% smaller than WebP. Skwiz handles the conversion seamlessly.
• JPEG (MozJPEG) — Mozilla's optimized JPEG encoder. Produces much cleaner files than standard system encoders.
• PNG (oxipng) — Professional-grade PNG optimization. Multi-threaded lossless shrinking for icons and transparent assets.

Resize to Fit

Skwiz can downscale images to match their display dimensions in Framer. If an image is displayed at 400×300px but the source file is 4000×3000px, you're serving 10× more pixels than needed.

• Set a maximum width or maximum height
• Aspect ratio is always preserved
• Skwiz never upscales — if the image is already smaller, it stays as-is

Preview & Compare

Before committing any changes, Skwiz shows a side-by-side comparison of the original and compressed versions:

• Visual diff — see the before/after at full resolution
• Zoom & pan — inspect specific areas at pixel level
• File size comparison — see exact bytes saved and percentage reduction
• Per-image decision — approve or skip individual images before applying

Batch Processing

Skwiz handles massive projects without breaking a sweat through intelligent delegation:

• Non-blocking Workers — Compression happens on background threads. Your Framer UI stays fluid even during 100+ image batches.
• Smart Page Navigation — View images in batches of 5 for instant load times, no matter how large your project is.
• Progressive Loading — Skwiz intelligently handles large files up to 50MB using threshold-based progressive loading.
• Parallel Queue — Large batches are distributed across multiple workers to maximize your CPU's performance.

CMS Collections

Skwiz can scan your Framer CMS collections and identify all image fields across every item:

1. Click Scan CMS in the loading options
2. Skwiz scans all collections and lists images found
3. Select which images to optimize (all or individually)
4. Process and replace — the optimized images are written back to the CMS

This is especially useful for client projects where content editors upload unoptimized photos.

Visual Effects

Apply professional adjustments directly inside Skwiz before you publish:

All effects are deterministic and applied at the pixel level using low-level canvas operations, ensuring the highest quality output.

Presets & Storage

Save your frequently used configurations for a consistent workflow:

• Custom Presets — Save format, quality, and effects as a one-click template.
• Secure Storage — Your license and settings are protected using the Web Crypto API (AES-GCM encryption).
• Per-Image Settings — Apply specific settings to one image, or sync a preset across the entire batch.

Privacy & Security

We take privacy seriously. Because Skwiz is fully self-contained within Framer:

• Zero Data Transmission — Your proprietary images never leave the plugin.
• GDPR/CCPA Compliant — No personal data is collected or stored.
• Secure License Check — Validated directly via LemonSqueezy's secure API.

Troubleshooting

Plugin doesn't load

Try closing and reopening the Framer editor. If the issue persists, reinstall the plugin from the Marketplace. Make sure your browser is up to date.

Images aren't detected

Skwiz detects images added as Image or Frame fills in Framer. SVGs, videos, and externally-hosted images (via URL) are not supported. Make sure the images are native Framer images.

Processing is slow

Compression speed depends on image size, format, and effort level. For faster processing:

• Lower the effort level
• Process in smaller batches
• Close other browser tabs to free up memory

Still need help?

Visit our support page or email us at studioshmp@gmail.com. Check the FAQ for common questions.