Short answer
For ordinary photo-like content, AVIF produced the smallest files, WebP was a close second with far broader browser support, and JPEG needed the highest quality setting to reach a comparable size. For flat-color graphics with sharp edges (screenshots, UI mockups, icons), lossless WebP or PNG beat every lossy format, often by an order of magnitude, because JPEG's block-based encoding is specifically bad at hard edges. Format choice matters as much as any quality slider, and which format wins depends entirely on what's actually in the image.
Key findings
- On the mixed/photo-like test image, AVIF at quality 50 reached a 99.4% reduction from the lossless PNG baseline, the smallest result of any format tested, beating WebP's best lossy result (99.2%) and JPEG's (97.7%).
- On the flat-color UI graphic, lossless WebP produced a 372 B file (a 97.4% reduction), while every JPEG setting tested made the filelarger than the original PNG (JPEG has no way to represent hard, flat edges efficiently).
- On pure random noise, every lossy format produced a larger file than a naive lossless PNG baseline. That is a concrete illustration that compression ratio depends on the image's actual content, not just the format or quality number chosen.
- AVIF encoding took roughly 15-25x longer than JPEG in this test (see encode-time columns below), which matters if you're processing images in bulk.
Methodology
Four 1200×800 test images were generated programmatically (not sourced from stock photography, so the exact input is reproducible and license-free) to represent distinct content types: a smooth gradient, random per-pixel noise, a flat-color UI-style graphic, and mixed/photo-like content combining a gradient, a solid shape, and mild texture. Each was saved as a lossless PNG (the "original" baseline for the reduction percentages below), then re-encoded into JPEG, WebP, and AVIF at several quality settings using sharp 0.35.4 (built onlibvips 8.18.6) on Node v24.14.1, tested September 9, 2026. The generation and measurement script is available for inspection atscripts/compression-benchmark.mjs in the site's source.
Smooth gradient (sky/portrait-background-like)
A best-case, low-detail image: smooth color transitions with no fine detail to discard. Lossless PNG baseline: 22.7 KB.
| Format | Quality | Size | vs. PNG baseline | Encode time |
|---|---|---|---|---|
| JPEG | 90 | 23.2 KB | +1.8% | 15 ms |
| JPEG | 80 | 10.0 KB | -55.9% | 17 ms |
| JPEG | 60 | 7.2 KB | -68.5% | 18 ms |
| WebP | 90 | 9.8 KB | -57% | 135 ms |
| WebP | 80 | 7.0 KB | -69.4% | 123 ms |
| WebP | 60 | 5.3 KB | -76.6% | 103 ms |
| WebP | lossless | 4.8 KB | -78.8% | 413 ms |
| AVIF | 70 | 4.4 KB | -80.5% | 354 ms |
| AVIF | 50 | 2.9 KB | -87.4% | 333 ms |
Random noise (worst case, no redundancy)
A worst-case image: random per-pixel color with no repeating structure for any encoder to exploit. Lossless PNG baseline: 36.1 KB.
| Format | Quality | Size | vs. PNG baseline | Encode time |
|---|---|---|---|---|
| JPEG | 90 | 771.7 KB | +2039.6% | 43 ms |
| JPEG | 80 | 594.1 KB | +1547.2% | 48 ms |
| JPEG | 60 | 415.6 KB | +1052.4% | 37 ms |
| WebP | 90 | 783.7 KB | +2072.8% | 503 ms |
| WebP | 80 | 642.2 KB | +1680.6% | 392 ms |
| WebP | 60 | 525.9 KB | +1358.2% | 330 ms |
| WebP | lossless | 36.7 KB | +1.6% | 154 ms |
| AVIF | 70 | 1027.4 KB | +2748.6% | 3611 ms |
| AVIF | 50 | 466.8 KB | +1194.2% | 3569 ms |
Flat-color UI graphic (screenshot/icon-like)
Represents a screenshot, icon, or UI mockup: large flat color areas and hard edges. Lossless PNG baseline: 14.2 KB.
| Format | Quality | Size | vs. PNG baseline | Encode time |
|---|---|---|---|---|
| JPEG | 90 | 94.0 KB | +560.9% | 14 ms |
| JPEG | 80 | 76.0 KB | +434% | 14 ms |
| JPEG | 60 | 60.5 KB | +324.8% | 12 ms |
| WebP | 90 | 18.1 KB | +27.1% | 76 ms |
| WebP | 80 | 15.5 KB | +9.1% | 83 ms |
| WebP | 60 | 14.9 KB | +4.8% | 74 ms |
| WebP | lossless | 372 B | -97.4% | 60 ms |
| AVIF | 70 | 3.8 KB | -73.4% | 749 ms |
| AVIF | 50 | 3.9 KB | -72.8% | 824 ms |
Mixed content (photo-like: gradient + shape + texture)
Represents an ordinary photo: a gradient background, a solid shape, and light texture. Lossless PNG baseline: 1364.9 KB.
| Format | Quality | Size | vs. PNG baseline | Encode time |
|---|---|---|---|---|
| JPEG | 90 | 172.5 KB | -87.4% | 19 ms |
| JPEG | 80 | 77.9 KB | -94.3% | 15 ms |
| JPEG | 60 | 31.3 KB | -97.7% | 14 ms |
| WebP | 90 | 170.7 KB | -87.5% | 194 ms |
| WebP | 80 | 60.9 KB | -95.5% | 210 ms |
| WebP | 60 | 10.6 KB | -99.2% | 141 ms |
| WebP | lossless | 247.3 KB | -81.9% | 653 ms |
| AVIF | 70 | 98.9 KB | -92.8% | 860 ms |
| AVIF | 50 | 8.9 KB | -99.4% | 502 ms |
JPEG vs. WebP
On the mixed/photo-like image, WebP beat JPEG at every matched quality setting tested (quality 90: 170.7 KB vs. 172.5 KB). JPEG remains the safer default only where an audience or system might not support WebP. Modern browsers and most upload targets do.
WebP vs. AVIF
AVIF produced smaller files than WebP at comparable quality on the photo-like and gradient images in this test, at the cost of meaningfully longer encode time. WebP remains the more broadly compatible modern format; AVIF is worth using where your browser supports producing it and file size matters more than encode speed. IMAGE SIZE PRO's format converter only offers AVIF where your specific browser can actually encode it.
When PNG (or lossless WebP) is better
For flat-color graphics (screenshots, icons, simple UI mockups), lossless formats won decisively in this test. JPEG's block-based encoding actively fights hard edges and flat color regions, which is why every JPEG setting tested made the flat-graphic test image larger, not smaller. If what you're compressing is a screenshot or graphic rather than a photograph, reach for PNG or lossless WebP before a lossy format.
Best format by use case
- Ordinary photos, general web use: WebP — a strong balance of size and compatibility.
- Maximum size reduction, browser support permitting: AVIF.
- Screenshots, icons, UI graphics: PNG or lossless WebP.
- Maximum compatibility (old email clients, some upload forms): JPEG.
- A hard size cap to hit, regardless of format: IMAGE SIZE PRO's compressor targets an exact KB number directly rather than a quality percentage.
Limitations
- Four synthetic test images, not a large corpus of real-world photographs. Absolute percentages would shift with different source content, though the directional pattern (format efficiency depends on content type) is well established independent of this specific test set.
- Encoded with sharp/libvips, not the browser Canvas API encoder IMAGE SIZE PRO's own tool uses in-browser. Results from the live tool on your own image may differ slightly at the same nominal quality setting.
- Encode time was measured on a single run on ordinary server hardware. It is not a rigorous performance benchmark, and browser-side encode time (what you'd actually experience using the tool) will differ from these Node-side numbers.
- AVIF and WebP browser support, while broad, isn't universal. Check compatibility for your specific audience before standardizing on either.