AVIF vs WebP: Which Format Delivers Better Compression for the Web?

Background: Two Modern Formats with Different Origins

Google developed WebP in 2010, releasing it as a royalty-free format based on the VP8 video codec intra-frame encoding. It shipped in Chrome in 2011 and gained widespread support by 2020 when Safari finally added it.

AVIF arrived later, published by the Alliance for Open Media in 2019. It is based on the AV1 video codec, a successor to VP9 that Google, Mozilla, Cisco, Intel, ARM, and others developed together. AV1 uses far more sophisticated encoding tools than VP8, which directly translates to better image compression.

File Size Comparison: AVIF vs WebP

These figures represent averages from testing with a diverse image corpus at visually equivalent quality settings (SSIM above 0.92):

AVIF gains are largest on photographic content with smooth gradients, skin tones, and complex textures.

Image Quality: Lossy and Lossless

Both formats support lossy and lossless compression. In lossy mode, AVIF produces fewer visible artifacts at low bit rates. WebP at low quality settings shows blockiness and color banding around sharp edges. AVIF handles these areas more smoothly due to its superior intra-frame prediction and in-loop filters.

In lossless mode, WebP typically produces smaller files than AVIF lossless for screenshots and graphics with flat color regions. For lossless photographic content, results are comparable.

Encoding Speed

This is WebP's clear advantage over AVIF. The VP8-based WebP encoder is fast. A typical 1200x800 image encodes in milliseconds. AVIF encoders are slower because AV1 encoding is computationally intensive. The reference libaom encoder runs at the slowest end. Faster encoders like rav1e and svt-av1 close the gap considerably.

For server-side batch conversion (running overnight, for example), encoding speed rarely matters. For real-time on-the-fly conversion of user-uploaded images, WebP may be a better fit if your server resources are constrained.

Browser Support: AVIF vs WebP

WebP has a longer head start, but AVIF now covers over 95% of global browser usage. The remaining gap is old Safari on iOS 15 and earlier.

Using Both Formats with the <picture> Element

The HTML <picture> element lets you serve AVIF to supporting browsers and fall back to WebP or JPEG for older ones:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

Browsers pick the first format they support. Modern browsers get AVIF. Safari 14-15 gets WebP. Older browsers get JPEG. This approach requires storing three image variants, but CDN storage is cheap compared to the bandwidth and performance gains.

Which Format Should You Use?