JPEG vs WebP vs AVIF vs JPEG XL
Every format below got the exact same byte budget for the exact same image. The only fair way to compare codecs is at equal cost; quality settings like "80" mean different things in every encoder.
Test image
saturated color, fine feather detail
Byte budget
≈ 12.3 KB for this 768×512 image. Every format gets the same budget.
Compare
The frame scales to your viewport; open the raw files for a 1:1 pixel look. Higher SSIM and PSNR mean closer to the uncompressed original.
Quality per kilobyte: parrots
Each line is one format encoding this image at the three budgets. Up and to the left wins: more quality for fewer bytes.
View as table
| Format | KB | SSIM | PSNR |
|---|---|---|---|
| JPEG · 0.25 bpp | 12.1 | 0.8964 | 34.45 |
| WebP · 0.25 bpp | 12.1 | 0.9473 | 38.31 |
| JPEG XL · 0.25 bpp | 12.3 | 0.9452 | 37.31 |
| AVIF · 0.25 bpp | 12.2 | 0.963 | 40.95 |
| JPEG · 0.5 bpp | 23.1 | 0.95 | 38.9 |
| WebP · 0.5 bpp | 24.2 | 0.9688 | 41.77 |
| JPEG XL · 0.5 bpp | 24.2 | 0.9694 | 41.23 |
| AVIF · 0.5 bpp | 23.6 | 0.9771 | 44.03 |
| JPEG · 1.0 bpp | 45.7 | 0.9745 | 43.06 |
| WebP · 1.0 bpp | 47.0 | 0.9809 | 44.79 |
| JPEG XL · 1.0 bpp | 48.3 | 0.9818 | 44.64 |
| AVIF · 1.0 bpp | 38.9 | 0.984 | 46.17 |
What you are looking at
At tight budgets (0.25 bpp), JPEG falls apart first: blocking in smooth gradients, ringing around edges, and muddy color. WebP holds shapes together better but smears fine texture. AVIF keeps both, at the cost of occasionally over-smoothing detail into plastic. JPEG XL degrades the most gracefully of the four, trading detail for a softer, less artifact-ridden image rather than breaking into blocks. As the budget rises, the gap narrows; by 1.0 bpp all four look respectable and the modern formats' advantage shrinks to file-size savings.
Methodology
Sources are three 768×512 images from the Kodak PhotoCD test set (released for unrestricted use): saturated detail, dense texture, and skin tones. For each format and budget, a script binary-searches the encoder's quality parameter for the best quality that fits the budget, using FFmpeg 8.1's mjpeg, libwebp, libaom-av1 (still-picture mode) and libjxl encoders, all in 4:2:0. SSIM and PSNR are computed against the original in yuv420p, so the scores measure codec loss rather than subsampling loss. The pipeline is in the site repo; regenerate everything with one command.
Caveats worth stating: this is one encoder per format (libaom is not the only AVIF encoder), speed settings favor practicality over maximum quality, and SSIM/PSNR are imperfect proxies for what eyes see. Trust the slider first, the numbers second.