AVIF vs WebP in 2026: Which Image Format Should You Use?

AVIF usually produces smaller files than WebP at equivalent visual quality and is supported by every major browser in 2026. For most websites, AVIF is the better default, and any image CDN worth using will negotiate between the two for you rather than making you store both.

What is AVIF?

AVIF (AV1 Image File Format) is an image format based on the AV1 video codec. It was developed by the Alliance for Open Media and released in 2019. AVIF supports lossy and lossless compression, transparency (alpha channel), HDR, and wide color gamuts.

AVIF’s lossy compression is significantly better than JPEG and better than WebP. In our own testing, AVIF needed 15-40% fewer bytes than WebP to reach the same measured visual quality, with the margin depending on the image.

What is WebP?

WebP is an image format developed by Google, released in 2010. It supports lossy and lossless compression, transparency, and animation. WebP was the first widely adopted “next-gen” format and has had universal browser support since 2020.

WebP’s advantage over JPEG is narrower than its reputation suggests. On the three images tested below, WebP needed between 1% and 17% fewer bytes than JPEG at the same measured visual quality, with the largest gain on the flat graphic and the smallest on the photographs. The commonly cited 25-34% figure comes from Google’s 2011 WebP Compression Study, which benchmarked against libjpeg 6b and measured with SSIM. Against a modern JPEG encoder, and measured with a newer perceptual metric, most of that margin disappears on photographic content. AVIF has since surpassed WebP on compression efficiency regardless.

How do AVIF and WebP compare on file size?

Comparing formats at the same quality number is misleading, because a quality setting of 75 does not mean the same thing to a WebP encoder as it does to an AVIF encoder. The honest comparison is bytes needed to reach the same measured visual quality.

We ran that test on three images at 1200px wide, scoring each output against a lossless reference with SSIMULACRA2, an open perceptual metric where 70 is high quality and 90 is close to visually lossless.

Image	JPEG	WebP	AVIF	vs WebP	vs JPEG
Product photo	717 KB	708 KB	607 KB	14% smaller	15% smaller
Marketing graphic	119 KB	98 KB	62 KB	37% smaller	48% smaller
Detailed photograph	75 KB	73 KB	44 KB	41% smaller	42% smaller

AVIF won on every image, by 14-41% against WebP and 15-48% against JPEG, including the flat marketing graphic. It also reached quality levels WebP could not: at maximum quality settings WebP never scored above 90, while AVIF did.

Does AVIF always beat WebP?

No, and the exception is not the one usually cited. You will often read that WebP wins on flat graphics, screenshots, and UI elements. In our lossy testing that was not true: AVIF beat WebP on the flat marketing graphic by 37%, one of its larger wins.

The real split is lossy versus lossless. Encoding the same three images in each format’s lossless mode reverses the result completely:

Image	WebP lossless	AVIF lossless	AVIF penalty
Marketing graphic	878 KB	1,287 KB	47% larger
Detailed photograph	773 KB	926 KB	20% larger
Product photo	3,097 KB	5,040 KB	63% larger

WebP’s lossless mode beat AVIF’s on every image, including the photographs. So the rule is about mode, not content type. If you are compressing lossily, which is almost everything on the web, AVIF is the better choice regardless of whether the image is a photo or a flat graphic. If you need lossless output, such as screenshots archived at full fidelity, WebP produces smaller files than AVIF, and JPEG XL smaller still.

Which browsers support AVIF in 2026?

All of them. Chrome added AVIF support in 2020, Firefox in 2021, and Safari in 2023. As of 2026, global AVIF support is above 95%, covering every major desktop and mobile browser.

This means there is no longer a practical reason to avoid AVIF for web images. The small percentage of unsupported browsers (mostly older embedded systems) can be served a WebP or JPEG fallback using the <picture> element.

How do you serve AVIF with Small Pics?

Small Pics outputs AVIF by default. If you request an image without specifying a format, you get AVIF:

https://your-domain.smallpics.io/photo.jpg?w=800

To explicitly request a format, use the fm parameter:

https://your-domain.smallpics.io/photo.jpg?w=800&fm=avif
https://your-domain.smallpics.io/photo.jpg?w=800&fm=webp

For maximum compatibility, use the <picture> element:

<picture>
  <source srcset="https://your-domain.smallpics.io/photo.jpg?w=800&fm=avif" type="image/avif" />
  <source srcset="https://your-domain.smallpics.io/photo.jpg?w=800&fm=webp" type="image/webp" />
  <img src="https://your-domain.smallpics.io/photo.jpg?w=800&fm=jpg" alt="Photo" loading="lazy" />
</picture>

When should you still use WebP?

WebP is still the right choice in a few specific situations:

As a fallback. If you use the <picture> element, WebP is the natural second source after AVIF. Browsers that do not support AVIF will get WebP, which is still much better than JPEG.

Lossless output. WebP’s lossless mode produces smaller files than AVIF’s, by 20-63% in our testing. If you are archiving screenshots or artwork at full fidelity rather than compressing for delivery, WebP is the better of the two.

Animated images. WebP supports animation and is widely supported for it. AVIF also supports animation, but encoding is slower and tooling is less mature.

When encoding speed matters. AVIF encoding is significantly slower than WebP. For services that process images on the fly (like Small Pics), this is handled on the server side and cached, so end users never notice. But if you are encoding images in a build step or on a low-powered device, WebP is faster to produce.

So which should you use?

Compress lossily, use AVIF. Need lossless, use WebP. That is the whole rule, and it does not turn on whether the image is a photograph or a flat graphic.

Almost everything on a web page is lossy, so AVIF is the default. Reach for WebP when you are archiving at full fidelity, when the image is animated, or when something has to encode fast on hardware you do not control. If your images go through a CDN, that last one is not your problem.

Serve AVIF first with WebP behind it in a <picture> element. The fallback is three extra lines and covers the browsers still missing AVIF. You do not have to store both: Small Pics builds each format from the same original when the URL asks for it, so the extra source costs you markup and nothing else.

Neither format is the end of the line. JPEG XL compresses better than both and can losslessly recompress existing JPEGs, though browser support is still limited. And if you are wondering how a service produces all these variants without you storing each one, how an image CDN works behind the scenes walks through it.