I used to think WebP was just "JPEG but newer." Then I dug into the actual compression pipeline, and the engineering is genuinely clever.
The Three Compression Techniques WebP Uses Simultaneously
PNG uses DEFLATE compression from the 90s. It works, but it doesn't know anything about images. WebP combines three image-specific techniques that each chew into the file size from a different angle.
1. Predictive Coding
Instead of storing every pixel, WebP predicts each pixel from its neighbors (above and left). It only stores the prediction error — the difference between predicted and actual. For photographs where adjacent pixels are nearly identical, the error is near zero and compresses extremely well.
const prediction = (pixelAbove + pixelLeft) / 2;
const error = actualPixel - prediction;
store(error); // Usually near zero → tiny file
PNG's DEFLATE has no concept of "this pixel is probably similar to the one next to it." That's the core reason WebP photos are 60-85% smaller than equivalent PNGs.
2. Block-Based DCT Transform
WebP divides images into 4×4 or 16×16 blocks and applies a Discrete Cosine Transform — same technique JPEG uses. High-frequency details (sharp edges, noise) get quantized more aggressively because human eyes barely notice.
This is why aggressive WebP compression produces "blocking artifacts" in flat areas — same JPEG-like artifact, but typically smaller at equivalent file sizes.
3. Arithmetic Entropy Coding
After prediction and DCT, WebP applies arithmetic coding to residuals. This encodes common values with shorter bit sequences, squeezing another 10-15% beyond what DEFLATE achieves on the same data.
Real Numbers from 500 Images
| Image Type | PNG | WebP Q80 | Savings |
|---|---|---|---|
| Product photo | 1.2MB | 180KB | 85% |
| Screenshot UI | 340KB | 74KB | 78% |
| Logo flat color | 28KB | 22KB | 21% |
| Gradient bg | 156KB | 24KB | 85% |
Flat-color images gain little — PNG's DEFLATE loves repeated pixels. Photos gain enormously because WebP understands image structure.
When PNG Still Wins
- Pixel-exact reproduction. OCR, image diffing, medical imaging — if you need bit-exact output, PNG lossless.
- Legacy software. Older Outlook, some enterprise CMS, certain PDF generators still reject WebP.
- You need PNG back from WebP. Converting WebP→PNG won't recover quality already lost in WebP compression. But it gives you a compatible file. webp2png.io handles this in-browser — no upload, no install, preserves whatever quality remains.
Check your own pipeline: DevTools → Network → filter Img. If Chrome users still get PNG, you're leaving 60-85% savings on the table.
Top comments (0)