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

WebP has been the safe "modern" image format for years. Now AVIF is everywhere too: in CMS settings, in image CDNs, in export menus. Both promise smaller files than JPEG. So which one should you actually use?

Rather than repeat the usual claims, we encoded the same images in both formats and measured the results. Below are the numbers, what the browser-support data says today, and a simple way to decide.

WebP has been the safe "modern" image format for years. Now AVIF is everywhere too: in CMS settings, in image CDNs, in export menus. Both promise smaller files than JPEG. So which one should you actually use?

Rather than repeat the usual claims, we encoded the same images in both formats and measured the results. Below are the numbers, what the browser-support data says today, and a simple way to decide.

The short answer

• For photos, AVIF usually gives you a smaller file than WebP at the same visual quality. In our test it was about a third smaller.
• For graphics, screenshots and anything you want lossless, WebP did far better than AVIF in our test.
• Browser support for both is now very high, but the safest setup still serves AVIF or WebP with a fallback.

The details follow.

What each format is

WebP is the older of the two. MDN's format guide describes it as offering "much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency etc." It has both a lossy and a lossless mode.

AVIF is newer. MDN lists its features: lossy and lossless compression, "Alpha channel support (i.e., for transparency)," animation, and "High Dynamic Range (HDR)" with 8, 10 or 12 bits per channel. MDN also says: "Generally, AVIF has better compression than WebP — median 50% vs. 30% compression for the same JPG set."

One practical difference MDN points out: "AVIF does not support progressive rendering, so files must be fully downloaded before they can be displayed."

Our test: same images, both formats

We wanted to compare file sizes at similar quality, not just at the same quality slider number, because "quality 75" means different things in different encoders.

What we used (tested 30 October 2026):

• Photo: one of our own product photos (a clear plastic box of strawberries on a black background), resized to 1600 × 945 pixels and saved as a lossless PNG to use as the reference.
• Graphic: a 1600 × 900 bar chart with flat colours and text, drawn with Python.
• Encoders: cwebp 1.6.0 for WebP, and avifenc 1.4.2 (with the aom encoder, speed 6) for AVIF.
• Quality measure: SSIM, calculated with FFmpeg 8.1.2. SSIM compares each encoded image with the original; 1.0 means identical.

This is one photo and one graphic, not a benchmark. Your results will vary with your images and settings.

Photo results

Compare files at about the same SSIM:

• JPEG q85: 179 KB, SSIM 0.927
• WebP q85: 115 KB, SSIM 0.926
• AVIF q60: 76 KB, SSIM 0.931

For this photo, AVIF matched the JPEG's quality at well under half the size, and was about 34% smaller than WebP at a similar (slightly higher) SSIM.

Notice also that WebP q75 and AVIF q60 are almost the same size (74 KB and 76 KB), but the AVIF scores noticeably higher. That's the "same slider number means different things" problem in action.

Graphic results

Two things stand out:

• Lossless WebP was the clear winner. It was less than a third the size of the PNG. The lossless AVIF was actually larger than the PNG we started with.
• In lossy mode, AVIF kept the chart almost perfectly at a small size. But for charts, logos and screenshots you often want exact pixels, and that's where lossless WebP shines.

Encoding speed

At these settings both encoders finished each 1600-pixel image in well under a second on our machine, so speed wasn't a deciding factor for single images. AVIF encoding can get much slower at its slowest, highest-effort settings, and that matters more when you're converting thousands of images.

Browser support

Here's what caniuse showed when we checked on 30 October 2026 (usage data from September 2026):

MDN's guide gives slightly different starting points for AVIF: "Chrome 85, Edge 121, Opera 71, Firefox 93, and Safari 16.1." The difference is mainly in how partial Safari support is counted.

Either way, a small share of visitors still use browsers without support for one or both formats. That's why the standard advice is to include a fallback.

How to serve AVIF with a fallback

MDN recommends that when you use a newer format, "you should provide a fallback in WebP, JPEG or PNG format using the <picture> element (or some other approach)." A typical pattern looks like this:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Describe the image here" width="1600" height="945">
</picture>

The browser picks the first format it supports. Browsers with AVIF support get the smallest file; older ones get WebP or JPEG.

Which should you use?

Use AVIF when:

• the image is a photo and file size matters most (large hero images, product galleries)
• you can serve a fallback, or your tools do it for you
• you're not hand-converting huge numbers of images at slow settings

Use WebP when:

• the image is a graphic, screenshot, logo or anything that needs to stay lossless
• you want one modern format with slightly wider support and fewer edge cases
• you need fast, simple conversion

Use both when you control the HTML: AVIF first, WebP as the fallback, JPEG or PNG last.

Converting your images

Our image converter turns PNG, JPEG, BMP, TIFF and GIF files into WebP (as well as PNG, JPEG and BMP). It doesn't create AVIF files. For AVIF you'll need a tool that supports it, such as an image CDN or a command-line encoder like the avifenc we used for this test.

Whatever format you choose, size the image correctly before you compress it. Then run it through our image compressor if it's still heavy. For a broader look at PNG, JPEG and WebP, see our image formats guide.

FAQ

Is AVIF better than WebP?

For photos, usually yes on file size: in our test AVIF was about 34% smaller than WebP at similar quality. For lossless graphics, WebP was much smaller. MDN says AVIF generally compresses better than WebP.

Do all browsers support AVIF?

Most current ones do. caniuse lists support in Chrome 85+, Edge 121+, Firefox 93+ and Safari 16.4+ (partial from 16.1), covering about 96% of global usage when we checked. Use a fallback for the rest.

Should I convert all my images to AVIF?

Not automatically. Convert photos where size matters, keep a WebP or JPEG fallback, and use lossless WebP or PNG for screenshots and graphics that need exact pixels.

Does AVIF support transparency?

Yes. MDN lists alpha channel support for AVIF, and WebP supports transparency too.

Can forgepx convert to AVIF?

Not at the moment. Our converter outputs WebP, PNG, JPEG and BMP.

Sources