📋 Contents
Lossy vs Lossless: When to Use Each
Image compression comes in two flavors:
Lossless compression preserves every pixel exactly. The decompressed image is identical to the original, bit-for-bit. It works by finding more efficient ways to store the same data — like PNG's DEFLATE algorithm, which compresses repeated patterns. Typical reduction: 10-30% for photos, 50-80% for screenshots and logos (lots of repeated pixels = high compressibility).
Lossy compression throws away data that human eyes are unlikely to notice. It exploits limitations in human vision — we're less sensitive to fine color detail than brightness detail, less sensitive to high-frequency patterns. By keeping what we see and discarding what we don't, lossy compression achieves 70-95% size reduction with minimal visible difference.
The rule:
- Lossless: Screenshots, logos, UI elements, text as image, anything that needs pixel-perfect reproduction.
- Lossy: Photos, gradients, paintings, anything with smooth color transitions. Also: anything going on the web that you want to load fast.
JPEG, PNG, WebP, AVIF — Which Format for What
| Format | Type | Best For | Not For |
|---|---|---|---|
| JPEG | Lossy | Photos, complex images with many colors | Text, logos, screenshots (creates artifacts around sharp edges) |
| PNG | Lossless | Screenshots, logos, icons, text, transparency | Photos (large file size — 5-10× bigger than JPEG equivalent) |
| WebP | Both (lossy + lossless) | Web images — replacement for both JPEG and PNG. 25-35% smaller than JPEG at same quality | Safari < 14 doesn't support it (but all modern browsers do) |
| AVIF | Both (lossy + lossless) | Best compression rate. 50% smaller than JPEG at same quality. HDR support | Encoding is slow. Older browser support is spotty |
| GIF | Lossless (256 colors) | Simple animations, very small files with few colors | Photos (256 color limit = terrible quality), anything >256 colors |
| SVG | Vector (not raster) | Icons, logos, illustrations, anything geometric | Photos (SVG can't represent photographic detail) |
Exact Compression Settings for Each Use Case
| Scenario | Format | Quality | Expected reduction |
|---|---|---|---|
| Photo for website hero | WebP lossy | 80-85 | 70-85% vs PNG |
| Photo for email attachment | JPEG | 60-75 | 80-90% vs original |
| Product photo (e-commerce) | JPEG | 85-92 | 40-60% vs original |
| Screenshot for documentation | PNG (lossless) | N/A | 50-80% vs uncompressed |
| Logo/icon | SVG or PNG | Lossless | SVG: 90%+ vs raster. PNG: 50% vs uncompressed. |
| Social media post | JPEG | 70-80 | Platform will recompress anyway |
| Archive/master copy | PNG or TIFF | Lossless | Never lossy-compress your only copy |
| Photos with transparency | WebP or PNG | Lossless for PNG, quality 90 for WebP | WebP: 50-70%. PNG: 10-30% |
Common Image Compression Mistakes
1. Saving a photo as PNG
A 5MB JPEG photo saved as PNG becomes 20MB. You gained nothing (PNG can't recover detail JPEG discarded) and the file is 4× larger. For photos: JPEG or WebP. Always.
2. Re-compressing JPEGs (generation loss)
Each time you open a JPEG, make an edit, and re-save as JPEG, you lose quality. The compression artifacts compound. After 3-4 re-saves at quality 80, the image looks noticeably worse. Solution: keep a lossless master, export JPEGs from that. Or use lossless operations (rotate, crop with compatible tools) that don't re-encode.
3. Using maximum quality "just to be safe"
JPEG quality 100 doesn't mean "perfect" — it means "use the least compression possible." The file is huge, and quality 95 looks identical in every practical sense while being 50-70% smaller. Above quality 92, you're paying bytes for pixels nobody can see.
4. Not resizing before compressing
A 6000×4000 photo displayed at 800px wide on a website is 56× larger than it needs to be. Resize to the display dimensions FIRST, then compress. A 800px-wide photo at quality 80 is ~50KB. The same photo at 6000px and quality 80 is ~2MB. Same quality, same visual result on screen — 40× size difference.
5. Stripping metadata incorrectly
Compression tools often strip EXIF/metadata. This is usually desired (privacy, smaller file) — but if you need copyright info, color profiles, or orientation tags, make sure your tool preserves them. ICC color profiles matter for accurate color reproduction.
Free Image Compression Tools
- Compress Image — Upload any image, pick quality, compress. Supports JPEG, PNG, WebP output.
- Compress to Exact Size — Target a specific file size (e.g., "under 500KB") and the tool adjusts quality to hit it.
- Resize Image — Resize to specific dimensions first, then compress. The one-two punch for web images.
- Image Converter — Convert between PNG, JPEG, WebP, AVIF, BMP, TIFF. Convert to the right format, then compress.
- PNG to WebP / JPG to WebP — Direct conversion to WebP with compression.