When does AVIF to WebP make sense?
AVIF is technically excellent, and if you can serve it with a WebP fallback via the <picture> element, do so. But you often cannot: a client's CMS refuses the upload, a newsletter tool renders a broken image, or a stock photo download arrives as AVIF and your designer's software cannot open it. In those cases, WebP is the format that just works.
Quality settings for AVIF sources
AVIF files are already lossy, so avoid stacking too much extra compression. Use 82–90% to stay visually transparent to the AVIF source. Expect the WebP to be roughly the same size, sometimes slightly larger; the trade is compatibility, not size.
| AVIF | WebP | |
|---|---|---|
| Compression efficiency | Best in class | Excellent |
| Browser support | ~93% | 97%+ |
| CMS / tooling support | Patchy | Universal |
| Encode speed | Slow | Fast |
| Transparency & animation | Yes | Yes |