How to compress images for Webflow?

Large images are the most common cause of slow-loading websites. Compressing images before uploading them to Webflow reduces file size without noticeable quality loss, keeping your pages fast and your Core Web Vitals healthy.

Why compress before uploading

Webflow does apply some automatic optimization to uploaded images, but it cannot compensate for excessively large source files. A 5 MB photo uploaded at full resolution will still be heavier than a properly compressed 200 KB version. Pre-compressing gives you full control over the quality-to-size tradeoff.

Recommended formats

• WebP — Best for photographs. Smaller file sizes than JPG at comparable quality.

• JPG — Good for photographs when WebP is not an option.

• PNG — Use only for graphics that need transparency. PNG files are larger than JPG or WebP for photos.

• SVG — Best for icons, logos, and vector graphics. Infinitely scalable with tiny file sizes.

Compression tools

Online tools

• Squoosh (squoosh.app) — Free, browser-based, supports WebP output. Drag and drop with real-time quality preview.

• TinyPNG (tinypng.com) — Batch compresses JPG and PNG files. Free up to 20 images at a time.

• Compressor.io — Supports multiple formats with before/after comparison.

Desktop tools

• ImageOptim (macOS) — Drag and drop, strips metadata and compresses losslessly.

• FileOptimizer (Windows) — Batch compression for multiple formats.

Command line

• Sharp (Node.js) — Ideal for batch processing large image sets.

• ffmpeg — Can convert and compress images in bulk.

A simple Sharp script to batch-compress a folder:

const sharp = require('sharp');
const fs = require('fs');

fs.readdirSync('./images').forEach(file => {
  sharp(`./images/${file}`)
    .webp({ quality: 80 })
    .toFile(`./output/${file.split('.')[0]}.webp`);
});

Target file sizes

As a general guide for web-optimized images:

• Hero images: 100–200 KB

• Content images: 50–100 KB

• Thumbnails: 20–50 KB

• Icons and logos: use SVG when possible, typically under 10 KB

Aim for a quality level of 75–85 for WebP and JPG. The difference from higher quality settings is barely visible, but file sizes drop significantly.

After uploading to Webflow

Once images are uploaded, use the Assets panel to verify file sizes. If an image is still too large, replace it with a more aggressively compressed version. You can also check page load performance using the Page Speed test in Webflow's built-in tools or Google PageSpeed Insights.