AVIF vs WebP
On 9 of 9 image-and-budget cells AVIF scores higher than WebP for the same bytes, by 0.022 SSIM on average. Both now decode in every browser, so the question is only which to serve, and the slider settles it faster than the numbers do.
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 |
|---|---|---|---|
| WebP · 0.25 bpp | 12.1 | 0.9473 | 38.31 |
| AVIF · 0.25 bpp | 12.2 | 0.963 | 40.95 |
| WebP · 0.5 bpp | 24.2 | 0.9688 | 41.77 |
| AVIF · 0.5 bpp | 23.6 | 0.9771 | 44.03 |
| WebP · 1.0 bpp | 47.0 | 0.9809 | 44.79 |
| AVIF · 1.0 bpp | 38.9 | 0.984 | 46.17 |
What you are looking at
WebP (2010) is VP8's intra frame in a container; AVIF (2019) is AV1's. Nine years of codec research sit between them, and it shows most where bits are tightest: at 0.25 bits per pixel WebP smears fine texture into soft patches and loses the colour in saturated detail, while AVIF keeps edges and gradients intact and spends its losses on slightly plasticky smoothing instead. The widest gap is on the motocross at 0.25 bpp: SSIM 0.8166 against 0.7322. As the budget rises the gap narrows; at 1.0 bpp both look good and AVIF's advantage shrinks to a smaller file for the same look.
Where WebP holds its own: encode speed (libwebp is an order of magnitude faster than libaom), lossless and alpha support that has been stable for a decade, and the dense motocross image, where it is the only one of the older formats that can still reach the 0.25 bpp budget at all. AVIF encodes are slow enough that most sites generate them once at build time rather than on demand.
Which to serve
In 2026 the honest answer is AVIF first, WebP as the fallback for
anything older than 2024, and JPEG for the long tail, delivered with
a <picture> element or content negotiation so each
browser gets the best one it decodes. The
format guide covers the
cases where that order flips, such as very large images and
animation.
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.