WebP vs AVIF for websites

If you are moving a website away from plain JPG and PNG, you will quickly face the question of WebP or AVIF. The short answer: both are good choices, AVIF usually produces smaller files for photos, and WebP is faster to create and more widely handled by older software. Many sites serve both. The details below help you decide what fits your situation.

Where the two formats come from

WebP was introduced by Google in 2010. Its lossy mode is based on the VP8 video codec, and it also has a separate lossless mode. It has had many years to spread into browsers, image editors, content management systems and operating systems.

AVIF comes from the Alliance for Open Media, the group behind the AV1 video codec. AVIF stores AV1-compressed images in the HEIF container, and the specification was published in 2019. It is newer, technically more advanced, and still less common outside the browser.

Side-by-side comparison

Compression and quality at low bitrates

Both formats beat JPG, but they behave differently when you push them hard.

At low quality settings, lossy WebP tends to look soft and blocky, similar to an over-compressed JPG but usually somewhat cleaner. Fine colored details, such as thin red text on a photo, can suffer because lossy WebP always stores color at reduced resolution.

AVIF holds up better when files get very small. Edges stay cleaner and smooth areas like skies and gradients show less banding and fewer blocks. Its typical weakness is the opposite: fine texture such as grass, fabric or skin pores can get smoothed away, giving a slightly painted look.

Quality numbers are not comparable between formats. A WebP at quality 80 and an AVIF at quality 80 are not the same thing. That is why the WebP converter defaults to 80 while the AVIF converter defaults to 60. The reliable way to choose is to compare outputs visually, for example with the image comparison tool, and pick the smallest file that still looks right at the size it will be displayed.

Encoding speed

This is where WebP clearly wins. Creating an AVIF takes much more computing work. For a handful of images on a blog it does not matter, but it does matter when a server has to convert thousands of user uploads, or when you rebuild a large image library.

In the browser you will notice it too. The AVIF converter downloads an encoder (libavif compiled to WebAssembly) the first time you need it, and a large photo can take a few seconds to encode. WebP output is almost instant by comparison. Decoding AVIF is also a bit heavier for the device that displays it, although this is rarely a problem on current phones and computers.

Browser support

All current major browsers, including Chrome, Edge, Firefox and Safari, display both WebP and AVIF. Safari added AVIF later than the others, so devices that are stuck on old operating system versions may show WebP but not AVIF. Outside browsers, WebP is more widely supported by image viewers, editors and upload systems.

If you need to support every possible visitor, use the fallback technique described below rather than relying on a single format.

Transparency and animation

Both formats support an alpha channel, so logos and product cutouts can have soft transparent edges. Both also support animation, which makes them much lighter replacements for animated GIFs. Tooling for animated AVIF is still less common.

One practical note: the Pikselix WebP converter uses the browser's built-in encoder, which only produces lossy WebP. Transparency is kept, but there is no lossless option. For sharp graphics that must stay pixel-perfect, a well-optimized PNG made with the PNG compressor can be a better choice.

Which one should you use?

• Photos on a content site or shop: AVIF if you can generate it, with WebP or JPG as a fallback.
• Many images converted on the fly or in large batches: WebP, because it encodes quickly.
• Images people will download and reuse: WebP or even JPG, since they open in more programs.
• Logos, icons and diagrams: SVG if you have a vector, otherwise lossless WebP or PNG.
• Images with HDR or wide color: AVIF, since WebP is limited to 8 bits per channel.

Serving both with picture and fallbacks

You do not have to choose only one. The HTML <picture> element lets the browser pick the first format it supports:

1. Open with <picture>.
2. Add <source type="image/avif" srcset="photo.avif"> as the first choice.
3. Add <source type="image/webp" srcset="photo.webp"> as the second choice.
4. End with a normal <img src="photo.jpg" alt="Description" width="1200" height="800"> and close with </picture>.

The browser reads the sources from top to bottom and uses the first type it understands. Browsers that support neither fall back to the JPG in the img tag. The img tag is also where the alt text, width and height belong, and its attributes control layout for all three versions.

A workflow that works well:

1. Resize each image to the largest size it will actually be displayed at.
2. Export an AVIF with the AVIF converter and a WebP with the WebP converter.
3. Keep a JPG fallback, compressed with the image compressor.
4. Compare the files and check that each version looks acceptable.
5. Add all three to the page with the picture element.

For dimensions, lazy loading and other speed topics, continue with the guide to image optimization for websites. The WebP and AVIF format pages summarize each format on its own.