Skip to content
JFIF.IO
Image Formats

AVIF vs WebP: Which Next-Generation Format Should You Use?

AVIF usually beats WebP on file size, WebP beats AVIF on encoding speed and support in older software. Here is how to decide — and how to use both.

By JFIF.IO TeamPublished 2 min read

AVIF vs WebP: Which Next-Generation Format Should You Use?

WebP and AVIF are the two modern image formats every current browser understands. Both beat JPEG on file size; the question is which to put first.

Where they come from

  • WebP (Google, 2010) is based on the intra-frame coding of the VP8 video codec. Lossless mode, transparency and animation were added in 2011–2012.
  • AVIF (Alliance for Open Media, 2019) stores images compressed with the AV1 video codec inside the HEIF container. AV1 is royalty-free and considerably more advanced than VP8.

Compression

For photographs at typical web quality, AVIF files are usually noticeably smaller than WebP files that look the same — often in the region of 20–30%, and AVIF’s advantage grows at low bitrates where WebP and JPEG start to show blocking and smearing. AVIF tends to degrade gracefully into a slightly soft image instead.

There are exceptions. Very detailed, noisy textures and some illustrations compress similarly in both, and lossless WebP is often competitive with — sometimes smaller than — lossless AVIF for graphics and screenshots. Test with your own images: the AVIF converter and WEBP converter show exact file sizes before you download.

Features

WebP AVIF
Lossy / lossless Yes / yes Yes / yes
Transparency Yes Yes
Animation Yes Yes
Bit depth 8-bit 8, 10 and 12-bit
HDR and wide colour gamut No Yes
Chroma subsampling 4:2:0 (lossy) 4:2:0, 4:2:2 or 4:4:4
Encoding speed Fast Slow

AVIF’s 10- and 12-bit support and HDR transfer functions make it the only one of the two suitable for HDR photography on the web.

Encoding speed

This is AVIF’s weak spot. AV1 encoders search a huge number of prediction and transform options, so encoding a large photo can take seconds rather than milliseconds. For a website that encodes each image once, that does not matter. For on-the-fly conversion of user uploads at scale it can.

In the browser, JFIF.IO encodes AVIF with a WebAssembly build of libavif. Expect a second or two for a typical photo and longer for very large images.

Support

All current versions of Chrome, Edge, Firefox, Safari (16+) and Opera display both formats. WebP has been supported for longer, so it reaches a few more people on old devices, and more desktop software opens WebP than AVIF.

Recommendation

  1. Serve AVIF first, WebP second, JPEG last when you control the markup:
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="…" width="1200" height="800" loading="lazy">
</picture>
  1. Only one format? Choose WebP if you need the broadest compatibility or fast encoding, AVIF if you want the smallest files.
  2. Quality settings are not comparable between formats. AVIF quality 60–70 often looks like WebP 80 or JPEG 85–90. Judge by eye and file size, not by the number.

Try it