JPEG XL vs AVIF
On SSIM, AVIF wins 8 of the 8 cells where both formats fit the budget, by 0.021 on average. That is not the whole story, and the slider shows the part the metric misses.
Test image
saturated color, fine feather detail
Byte budget
≈ 12.3 KB for this 768×512 image. Every format gets the same budget.
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 XL · 0.25 bpp | 12.3 | 0.9452 | 37.31 |
| AVIF · 0.25 bpp | 12.2 | 0.963 | 40.95 |
| JPEG XL · 0.5 bpp | 24.2 | 0.9694 | 41.23 |
| AVIF · 0.5 bpp | 23.6 | 0.9771 | 44.03 |
| 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
Two formats finalised within a year of each other with opposite philosophies. AVIF is a video codec's keyframe: it wins by throwing detail away cleverly, smoothing texture into something plausible that scores well against the original. JPEG XL was designed as a still-image codec from the ground up, and it degrades differently: softer rather than smoother, keeping a little grain and edge noise where AVIF would plane it flat. On the parrot feathers at 0.25 bpp the two are close; on skin tones JPEG XL's softness reads as slightly more natural even though AVIF's number is higher.
The metric and the eye disagree here more than on any other page on the site. SSIM and PSNR reward exactly the kind of smoothing AVIF does, and libjxl is tuned for Butteraugli, a perceptual metric this pipeline does not run. Drag the slider before trusting the chart. Where the numbers are unambiguous is on dense texture: JPEG XL cannot reach the 0.25 bpp budget on the motocross image at any setting, while AVIF can.
The support situation
This is where the comparison is decided in practice. AVIF decodes in every current browser. JPEG XL decodes natively in Safari (since 2023); Firefox support is behind a flag, and Chrome's experimental Rust decoder (145+) is disabled by default. Do not treat it as a normal delivery target without a fallback. This page decodes the left-hand side with a WebAssembly build of libjxl when your browser cannot, which is a demonstration, not a delivery strategy. JPEG XL's lossless recompression of existing JPEGs (about 20% smaller, bit-exact reversible) remains its strongest argument and the one that does not depend on any browser.
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 favour practicality over maximum quality, and SSIM/PSNR are imperfect proxies for what eyes see. Trust the slider first, the numbers second.