Where AVIF came from
AVIF was published by the Alliance for Open Media in 2019, wrapping the royalty-free AV1 video codec in a still-image container. It compresses considerably harder than WebP and adds 10- and 12-bit colour, HDR and wide gamut. The catch is encode time — AVIF is dramatically slower to produce — and browser support that is broad but still younger than WebP's, which is why most sites serve AVIF with a WebP fallback rather than instead of it.
The technical picture
Compression: Lossy or lossless AV1 intra-frame. Transparency: Full alpha. Animation: Supported. Colour: Up to 12-bit per channel, HDR and wide gamut. Typical file size relative to WebP: typically 20-30% smaller than WebP at matched quality.
Where it opens
Chrome 85+, Firefox 93+, Safari 16.4+, Edge 121+. This is usually the deciding factor when choosing between AVIF and WebP — WebP renders in every browser but is uneven in desktop software, while AVIF has a very different support profile.
Converting AVIF to WebP
WebP is the safer default: it is supported by a wider range of browsers and desktop tools than AVIF, decodes far faster on low-end devices, and is what most CDNs and CMS platforms handle natively. Serve AVIF through a element with a WebP or JPG fallback. Support is good but not yet the near-total coverage WebP enjoys.
Converting WebP to AVIF
AVIF is the next step down in file size — typically another 20-30% below WebP at the same visual quality, with HDR and wide-gamut colour WebP cannot represent. Worth it for hero images and photo-heavy pages. Expect the AVIF output to be typically 20-30% smaller than WebP at matched quality — that difference is the price of getting a format the destination will actually accept.