In this article, we'll compare WebP vs. AVIF, explore their differences, and show how you can simplify your image handling in HTML.
What are WebP & AVIF?
Most will be familiar with PNG and JPEG images. Not surprisingly, they still dominate the web with a market share of 28.4% and 32.4% across websites.
WebP and AVIF are so-called next generation image formats. The adoption-chart reveals this as well as we can see a 12.0% market share for WebP and 1.0% for AVIF.
And as one may expect from a newer image format, one is more modern and comes with enhanced features.
WebP: The first modern alternative to JPEG
Developed by Google, WebP was introduced as a more efficient replacement for JPEG and PNG, providing:
- Lossy compression: 25–34% smaller than JPEG at similar quality
- Lossless compression: 26% smaller than PNG
- Alpha transparency (like PNG)
- Animation support (like GIF)
AVIF: The next-gen format
AVIF (AV1 Image File Format) is based on the AV1 video codec, providing even better compression than WebP:
- Superior quality at lower file sizes (compared to both WebP and JPEG)
- Better handling of HDR and wide color gamuts
- More efficient compression for large images
Comparison table
Let's look at these feature and other advantages in a side by side comparison:
Feature | WebP | AVIF |
---|---|---|
Lossy Compression | ✅ Better than JPEG | ✅ Even better than WebP |
Lossless Compression | ✅ Smaller than PNG | ✅ Smaller than WebP |
Transparency | ✅ Yes | ✅ Yes |
Animation | ✅ Yes | ❌ No |
HDR Support | ❌ No | ✅ Yes |
Browser Support | ✅ All Major Browsers (since 2020) | ✅ All Major Browsers (since Jan 26, 2023) |
Encoding Speed | ✅ Fast | ❌ Slower |
For more technical details and charts, see this Image Coding Comparison provided by the Google team or an article covering visual comparisons between different image formats by Jake Archibald.
Choosing between WebP & AVIF
When looking at the table above, there's a clear verdict: AVIF generally provides better compression and quality than WebP. WebP is still faster to encode though while also being a better choice for animations.
Knowing this means tech teams can move up to the next step of the decision tree before actually implementing this new feature: what does browser support of WebP and AVIF look like?
Browser support
Both WebP and AVIF are supported in all major browsers. Exact browser version to support each image format are as follows:
- WebP is supported since:
- browser versions Chrome version 9, Edge version 18, Firefox version 65 and Safari version 14
- bringing full support since 2020-09-16
- as Safari was the last browser to join the WebP party at that date
- AVIF is supported since:
- Chrome version 85, Edge version 121, Firefox version 93 and Safari version 16
- bringing full support since 2024-01-26
- as Microsoft Edge was the last browser to join the AVIF party at that date
Baseline status
If you think these are too many details, then you're not alone. The Baseline initiative aims to simplify browser support per web feature, for example by providing Baseline badges per feature. As a result, you'll see the latest support status below:
Baseline Widely available
WebP is well established and works across many devices and browser versions.
- Supported as of Chrome 9, Edge 18, Firefox 65 and Safari 14
- Resulting in full support since September 16, 2020
- Continue reading about rfc9649
Register to RUMvision to see more resources and learn if your website visitors would already benefit from this feature today.
Baseline 2024
Newly available
AVIF works across the latest devices and browser versions.
AVIF might not work in older devices or browsers.
- Supported as of Chrome 85, Edge 121, Firefox 93 and Safari 16
- Resulting in full support since January 26, 2024
- Continue reading about av1 avif
Register to RUMvision to see more resources and learn if your website visitors would already benefit from this feature today.
At time of writing, WebP is considered Widely Available. In terms of Baseline, this means that at least 30 months has passed since becoming available in all major browsers. In other words, you can safely use WebP on your website today.
Meanwhile, AVIF is considered Baseline 2024. A blue Baseline status that you might be close to safe to adopt such feature, but when a portion of your visitors are not as up to date with their browser version, they might not benefit from AVIF yet.
Support by your real visitors
Does this mean you should wait for another 20 months before fully depending on AVIF? Not necessarily. There are compelling reasons to consider switching to AVIF sooner:
- reduced image HTML complexity (see below)
- reduced bandwidth thanks to lower file sizes
- reduced data storage as other (fallback) formats don't need to be stored on the server anymore
However, the key question isn't about a theoretical timeline – it's about whether your actual site visitors are ready for AVIF-only images. To answer this definitively, you can combine Baseline feature details with Real User Monitoring (RUM) data from your own website.
This is what we did at RUMvision, combining RUM data with Baseline data and show visible progress over time. You know when you are safe to ship AVIF images without any fallbacks. This is illustrated in the screenshot below:
This allows shareholders to not just make an educated guess, but to see when exactly your visitors are ready for AVIF.
What developers can do
Before AVIF was widely supported, developers had to provide multiple formats inside a <picture>
element to ensure compatibility. This is what you would then typically see in source codes of websites:
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="A sample image">
</picture>
Here’s what this setup did:
- Browsers that support AVIF load
image.avif
. - Browsers without AVIF but with WebP support load
image.webp
. - Older browsers that support neither load
image.jpg
.
While effective, this added extra markup and complexity, for example:
- in templating files
- combining different image formats with different image dimensions
- generating different image formats on the fly
.. or all of the above.
Simplified image serving
When your data shows that AVIF is supported across all major browsers, your developers no longer need fallbacks. Instead, you can directly use:
<img src="image.avif" alt="A sample image">
This simplifies your code while ensuring the best compression and quality for all users. Moreover, combining this with different image dimensions for different viewports won't be as complex anymore.
Final thoughts
With one year of full AVIF browser support, developers might be safe already when all their visitors have kept their browsers updated.
Data-driven decisions
However, this isn't always the case. Combining Baseline data with RUM data enables data-driven decisions, for example by using existing tools like RUMvision.
The benefits of making this transition are clear:
- Developers get to work with modern features as soon as visitors are ready
- Code complexity will reduce
- Real visitors will benefit from better image quality and faster load times
Looking ahead
Looking ahead, while AVIF is currently the most advanced image format we have, the web continues to evolve. Future image formats may offer even better compression or new features. By establishing a data-driven approach to adoption now, teams will be better positioned to evaluate and implement these upcoming innovations when they arrive. The key is finding the right balance between embracing new technology and ensuring a smooth experience for all users.