Large images slow down websites, eat up storage, and make emails harder to send. But compress too aggressively and your images look terrible. Here’s how to find the sweet spot.
Lossy vs lossless: what’s the difference?
There are two fundamentally different ways to compress an image:
Lossless compression reduces file size without changing a single pixel. The decompressed image is identical to the original. PNG uses lossless compression. Think of it like zipping a file — nothing is lost.
Lossy compression removes data that your eyes are less likely to notice. JPEG and WebP use lossy compression. The image looks nearly identical, but some fine detail is gone forever. The benefit: much smaller file sizes.
When to use each
| Use case | Recommended |
|---|---|
| Photos and screenshots | Lossy (JPEG/WebP) at 80-85% quality |
| Graphics with text | Lossless (PNG) or lossy WebP |
| Icons and logos | SVG if possible, otherwise lossless PNG |
| Transparency needed | PNG or WebP (both support alpha) |
| Web page images | WebP for best size-to-quality ratio |
Practical compression tips
1. Resize before compressing
A 4000x3000 photo compressed to 200 KB looks worse than a 1920x1080 photo at the same size. Downscale first, then compress.
2. Use WebP when possible
WebP typically produces files 25-35% smaller than equivalent JPEG at the same visual quality. All modern browsers support it.
3. Target 80-85% quality for photos
Below 80%, JPEG artifacts become noticeable (blocky areas, color banding). Above 90%, you’re paying a big size penalty for quality differences most people can’t see.
4. Use quantization for PNGs
Tools that use pngquant can reduce PNG file sizes by 60-80% by reducing the color palette from millions to 256 carefully chosen colors. For most images, the difference is invisible.
5. Strip metadata
EXIF data (camera model, GPS coordinates, timestamps) can add 10-50 KB to every image. Stripping it reduces size and protects your privacy.
How much compression is enough?
Here are practical targets for web images:
- Hero images: Under 200 KB
- Content images: Under 100 KB
- Thumbnails: Under 30 KB
- Icons: Under 5 KB (use SVG when possible)
These aren’t hard rules — they’re starting points. Use your eyes as the final judge.
Browser-based compression
Modern browser tools can handle compression entirely on your device using technologies like WASM (WebAssembly) and Canvas API. This means:
- No uploading to servers
- No file size limits from a service
- No waiting for server processing
- Your images stay private
The trade-off is that very large batches may be limited by your device’s memory, but for typical use cases (dozens of images), it works perfectly.