Skip to content
DuckConvert Mascot
DuckConvert
Blog

DuckConvert · · Updated

WebP vs AVIF: Which Next-Gen Image Format is Better for Your Website?

When it comes to optimizing images for the web, two heavyweights dominate the conversation: WebP and AVIF. Both formats offer significant advantages over traditional JPEGs and PNGs, but which one should you choose to speed up your website and improve your Core Web Vitals?

What is WebP?

Developed by Google, WebP has been around since 2010. It uses both lossy and lossless compression and supports transparency (alpha channel) and animation.

Pros of WebP:

  • Universal Support: It is supported by nearly 97% of global web browsers.
  • Good Compression: WebP images are generally 25-35% smaller than their JPEG equivalents.

What is AVIF?

AVIF (AV1 Image File Format) is the new kid on the block, developed by the Alliance for Open Media. It is based on the AV1 video codec and has rapidly gained popularity.

Pros of AVIF:

  • Incredible Compression: AVIF routinely beats WebP by another 20-30% in file size reduction at the exact same visual quality.
  • Advanced Features: It supports High Dynamic Range (HDR) and wide color gamuts.

Which Should You Choose?

If maximum compression and modern web performance are your top priorities (especially for mobile users on 3G/4G networks), AVIF is the clear winner. It simply provides better quality at a smaller file size than WebP.

However, because WebP has been around much longer, it has deeper legacy support. Many developers choose to offer AVIF as the primary image and fallback to WebP using the HTML <picture> tag.

How to Convert Your Images

You don't need expensive software to generate these next-gen formats. With DuckConvert, you can convert your existing media securely in your browser:

All conversions are processed locally on your device, meaning 100% privacy and no slow server uploads. Try it out today to speed up your website!

Where the comparison gets less one-sided

Raw compression is only one axis, and AVIF's win there is real. Several other axes go the other way, and they matter more than the headline percentage on a lot of real sites.

Encoding cost is the big one. AV1 was designed for video, where an expensive encode is amortised across millions of views, and that inheritance shows. Making an AVIF is markedly slower and more CPU-hungry than making a WebP, sometimes by an order of magnitude at comparable quality settings. On a build step that processes a handful of hero images this is invisible. On a CMS that regenerates thumbnails for ten thousand uploads it turns into a real infrastructure bill.

Small images are the second. AVIF carries more container overhead than WebP, and below roughly a few kilobytes that overhead can outweigh the better compression. Icons, avatars and small UI sprites sometimes come out larger as AVIF than as WebP or even as an optimised PNG. It is worth measuring rather than assuming, because the assumption fails exactly where you have the most files.

Third, AVIF has no progressive rendering. A JPEG can paint a rough version early and refine it; an AVIF appears when it has arrived. On a fast connection nobody notices. On a slow one, a large AVIF hero image is a blank space for longer than the equivalent progressive JPEG would have been, which can read worse in a perceived-performance test even while winning on bytes transferred.

A practical decision, rather than a winner

Serving both is the standard answer, and the <picture> element makes it mechanical: list AVIF first, WebP second, and a JPEG or PNG last. The browser takes the first type it understands, so you are not choosing at all, you are letting each visitor's browser choose.

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="..." width="1200" height="630" />
</picture>

The cost is storing and generating three versions of every asset. Where that is not worth it, a reasonable rule of thumb is: photographic content and large hero images benefit most from AVIF, since that is where the byte savings are largest in absolute terms. Interface graphics, icons and anything small are usually fine as WebP, where the encode is cheaper and the overhead lower.

The thing neither format fixes

Format choice is often the smallest of the available wins. Serving a 4000-pixel image into a 400-pixel slot wastes far more bandwidth than the difference between WebP and AVIF ever recovers, and no amount of codec improvement helps. Resizing to the dimensions actually displayed, and providing a srcset so phones do not download desktop-sized assets, will usually beat a format migration outright.

Get the dimensions right first. Then argue about the codec.