A single unoptimized screenshot can be 5MB. Multiply that by a dozen images in your docs, blog, or product page, and you've got a site that loads like it's 2005.
Here's how to compress images effectively without making them look worse.
Why Image Size Matters
Every extra megabyte adds load time. For reference:
| Image size | Load time on 4G | Impact |
|---|---|---|
| 500KB | ~0.5s | Acceptable |
| 2MB | ~2s | Noticeable delay |
| 5MB+ | ~5s+ | Users leave |
Google also uses page speed as a ranking factor. Heavy images directly hurt your SEO.
The Three Compression Levers
1. Format Choice
The format you export to has the biggest impact on file size:
- WebP — Best overall. 25-35% smaller than JPEG at equivalent quality. Supported everywhere that matters.
- JPEG — Great for photos and complex screenshots. Lossy compression with tunable quality.
- PNG — Lossless, so it's large. Only use when you need transparency or pixel-perfect text rendering.
Rule of thumb: If it's a screenshot or photo, use WebP or JPEG. Only use PNG when transparency is required.
2. Quality Level
For JPEG and WebP, quality is a slider from 1-100. The sweet spot for most images:
| Quality | Use case |
|---|---|
| 90-100 | Archival, print |
| 75-85 | Web images, documentation |
| 60-70 | Thumbnails, previews |
| Below 50 | Visible artifacts, avoid |
At quality 80, most images are indistinguishable from quality 100 to the human eye, but the file is 40-60% smaller.
3. Dimensions
A 4000px-wide screenshot displayed at 800px on your page is wasting 80% of its pixels. Resize to the maximum display size (accounting for retina: 2x the CSS width).
For web usage:
- Blog images: 1200-1600px wide
- Thumbnails: 400-600px wide
- Full-width hero: 1920px wide
Tools for Image Compression
Browser-Based (No Upload)
Zumie Image Compressor — Free, runs entirely in your browser. Pick format (JPEG, PNG, WebP), adjust quality, resize. Your images never leave your device.
Desktop Tools
ImageOptim (Mac) — Drag-drop batch optimization. Lossless by default with optional lossy.
Squoosh (Google) — Web app with side-by-side comparison. Great for dialing in the perfect quality level.
CLI / Automation
For build pipelines, use automated tools:
# Sharp (Node.js) — fast, widely used
npx sharp-cli -i input.png -o output.webp --quality 80
# cwebp (Google)
cwebp -q 80 input.png -o output.webp
Best Practices
Batch Process
Don't optimize images one at a time. Use a tool that handles batches, or add compression to your build pipeline.
Don't Compress Twice
Compressing an already-compressed JPEG makes it worse, not smaller. Always compress from the original source image.
Use Responsive Images
Serve different sizes for different screens using srcset:
<img
src="image-800.webp"
srcset="image-400.webp 400w, image-800.webp 800w, image-1600.webp 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="Description"
/>
Check Before and After
Always verify your compressed image looks acceptable. A 90% file size reduction means nothing if the image looks like a watercolor painting.
Quick Reference
| Starting format | Best action | Expected savings |
|---|---|---|
| PNG screenshot | Convert to WebP 80% | 70-85% smaller |
| JPEG photo | Re-export at quality 80 | 30-50% smaller |
| Large PNG with transparency | Keep PNG, resize down | 60-75% smaller |
| Any image > 2000px wide | Resize to 1600px + WebP | 80-90% smaller |
Compressing Screen Recordings Too
If you're optimizing images for your docs or product pages, you probably care about file size across the board. Zumie produces optimized screen recordings with automatic zoom, clean backgrounds, and efficient encoding — so your videos are polished and lightweight without post-processing.