JPEG, PNG or WebP? A Decision Guide With Numbers
"Use WebP" is half right, which makes it fully wrong for some images. We ran the same 20 images through every format with the browser's own encoders. Here's the decision table — and the case where lossless WebP loses.
The Decision Table
| Your image | Best choice | Measured evidence |
|---|---|---|
| Photo for the web | WebP Q60 | 102 KB at SSIM 0.955 ≈ JPEG Q50's fidelity (149 KB, 0.959) — the honest saving is ~31%, not the "half the size" often claimed. |
| Photo, maximum compatibility needed | JPEG Q50–Q70 | JPEG is universal; at Q90 both formats measured equal (240 vs 241 KB). |
| Screenshot / UI capture | WebP (lossy or lossless) | WebP won on both size and fidelity at every quality tested. |
| Text document / scan | Lossless WebP | 87 KB = 0.27× the PNG size (3.6× smaller) with zero loss. |
| Already-optimized PNG screenshot | Keep PNG! | Counter-finding: lossless WebP was larger (259 vs 123 KB). Don't convert for its own sake. |
| Flat illustration / logo | PNG or lossless WebP | JPEG is the wrong tool — larger than lossless at every quality, with visible artifacts. |
Why "WebP is half the size of JPEG" Is Wrong
Comparing formats at the same quality number is meaningless — quality scales aren't comparable across encoders. When we matched fidelity instead, photos showed WebP Q60 ≈ JPEG Q50 in SSIM, and the real saving was ~31%. Still excellent. But the honest number matters when you're estimating bandwidth bills.
The big WebP wins are elsewhere: lossless WebP on documents (3.6× smaller than PNG) and screenshots at every quality. And the failure case matters too: an already-optimized PNG got bigger under lossless WebP. Measure your own typical images once — it takes a minute with the tools below.
Step by Step
- Find your image's row in the table above.
- Open the Format Conversion tool — everything happens in your browser; the file never uploads.
- Convert to the recommended format. For photos, try WebP Q60 and JPEG Q70, compare sizes and previews.
- If the "best choice" didn't actually shrink your file, keep the original — that's the PNG counter-finding in action.