Compress a 5MB camera photo to 500KB without visible quality loss — how is that possible? Why do some PNGs stay multiple MB no matter what? Why is WebP both 30% smaller than JPEG and clearer?
1. The Essence: Discarding Information the Eye Can't See
- Lossless: Store the same data more compactly. A row of 100 white pixels stored as "100 white" beats storing "white" 100 times;
- Lossy: Discard information the eye is insensitive to. Merge tiny color differences in adjacent pixels — invisible but huge data savings.
2. Three Mainstream Formats Compared
| Format | Compression | Transparency | Animation | Best for |
|---|
| JPEG | Lossy | No | No | Photos, gradients |
| PNG | Lossless | Yes | No | Screenshots, icons |
| WebP | Both | Yes | Yes | Universal |
3. JPEG: The Industry Standard for Photos
Standardized in 1992, still mainstream. Pipeline: RGB → YCbCr → 4:2:0 chroma subsampling → 8×8 DCT → quantization → Huffman coding. Quality (0-100) controls quantization aggressiveness:
- 95-100: Photo archive;
- 80-90: Web, social media (most common);
- 60-80: Thumbnails, email;
- < 60: Visible artifacts.
Pitfall: Don't repeatedly edit the same JPEG — each save re-compresses lossily.
4. PNG: Best for Sharp Text and Transparency
Lossless, ideal for screenshots, icons, logos, line art. Compression is DEFLATE — particularly effective on "repeated color blocks."
- Palette mode (PNG-8): 256 colors, much smaller;
- External optimizers: pngcrush, optipng, oxipng — 10-30% lossless reduction;
- Lossy PNG (pngquant): reduce colors for 60-80% reduction.
🗜️
Free Online Image Compression
JPEG/PNG/WebP, browser-local processing
→
5. WebP: The Modern Better Option
Released by Google in 2010, combines JPEG and PNG advantages: lossy mode 25-35% smaller than JPEG; lossless 26% smaller than PNG; supports transparency and animation. Caveats: WeChat doesn't support; older iOS Safari doesn't support.
6. Best Parameters by Scenario
| Scenario | Format | Quality |
|---|
| Web hero image | WebP (JPEG fallback) | 80 |
| E-commerce main image | JPEG | 90 |
| Social media | JPEG | 85 |
| Screenshot docs | PNG | Lossless |
| App icons | PNG-8 / SVG | Lossless |
| Email attachments | JPEG | 75 |
| Print-grade | TIFF / lossless PNG | Lossless |
7. Engineering Tips for Batch Compression
- Keep originals: never overwrite in place;
- Naming convention:
photo-1920w-q80.webp;
- Responsive images:
<picture> tag;
- Progressive JPEG: blur-to-clear loading;
- Mobile pre-compression: compress client-side before upload.
Conclusion
Image compression is never a binary choice between "highest quality" or "smallest size" — it's precise tradeoffs based on context.