WebP and AVIF are the two image formats reshaping the modern web. Both compress dramatically better than JPEG and PNG, both support transparency and animation, and both are now widely supported. So if you are modernizing your images, which one should you actually use?
The honest answer is often "both" — but understanding how they differ lets you make the right call for each situation. This guide compares WebP and AVIF on the things that matter in practice: compression, quality, browser support, encoding speed, and features.
The Short Answer
If you want the smallest possible files and are serving a modern audience, AVIF usually wins. If you want the broadest reach and the simplest, fastest workflow, WebP is the safer default. The best approach for most websites is not to choose at all: serve AVIF with a WebP fallback and a JPEG or PNG fallback beneath that, and let each browser download the best version it supports.
The rest of this guide explains why.
Where Each Format Comes From
WebP was created by Google and released in 2010, based on the VP8 video codec. It has had more than a decade to mature, which shows in its broad support and stable tooling.
AVIF arrived in 2019 and is based on AV1, the royalty-free video codec from the Alliance for Open Media — a group that includes Google, Apple, Microsoft, Mozilla, and Netflix. AV1 is a newer, more sophisticated codec than VP8, which is the root of AVIF's efficiency advantage.
Compression and Quality
At the same visual quality, AVIF files are typically 20 to 30 percent smaller than WebP, and roughly half the size of a comparable JPEG. WebP, for its part, is usually 25 to 34 percent smaller than JPEG. So the size ranking, best to worst, is generally AVIF, then WebP, then JPEG.
AVIF's advantage is largest at low-to-medium quality settings, where its modern codec preserves detail and avoids the blockiness older formats show when pushed hard. It also handles gradients and flat color smoothly, reducing the banding you sometimes see in skies or shadows. WebP remains excellent and is more than good enough for the vast majority of images, but AVIF is the efficiency leader.
Browser Support
This is where WebP still has an edge. WebP is supported in every current major browser and has been for years, including Safari since version 14. You can serve it to almost any audience without a second thought.
AVIF support is now broad too — Chrome, Firefox, and Edge have supported it for some time, and Safari added it in version 16.4. For most audiences that coverage is plenty, but because a small share of older devices still cannot display AVIF, a fallback is wise. The HTML picture element makes this trivial, so AVIF's slightly narrower support is rarely a real obstacle.
Encoding Speed and Tooling
WebP encodes quickly and has mature, well-documented tooling everywhere. AVIF, built on the more complex AV1 codec, is slower and more CPU-intensive to encode, sometimes substantially so at the highest compression effort. For a handful of images this is invisible; for processing thousands of images in a build pipeline, the difference in time and cost can matter.
In short: WebP is the lighter-weight choice operationally, while AVIF asks for more compute in exchange for smaller files.
Features
Both formats support lossy and lossless compression, full alpha transparency, and animation. AVIF goes further in a few areas that matter for high-end imagery: it supports high dynamic range, wide color gamuts, and higher bit depths up to 12-bit, where WebP is limited to standard 8-bit color. If you are publishing HDR photography or wide-gamut artwork, AVIF is the only one of the two that can represent it faithfully.
WebP vs AVIF at a Glance
| Property | WebP | AVIF |
|---|---|---|
| Based on | VP8 (Google, 2010) | AV1 (AOMedia, 2019) |
| Typical size vs JPEG | 25–34% smaller | About 50% smaller |
| Quality at low bitrates | Good | Excellent |
| Browser support | Universal (Safari 14+) | Broad (Safari 16.4+) |
| Encoding speed | Fast | Slower, more CPU |
| Transparency and animation | Yes | Yes |
| HDR, wide gamut, 12-bit | No | Yes |
Which Should You Use?
For most websites, use both with a fallback chain: AVIF first, WebP second, JPEG or PNG last. Every visitor gets the most efficient format their browser supports, and nothing breaks on older devices.
If you must pick a single format, let your priority decide. Choose **WebP** when broad compatibility, fast encoding, and a simple workflow matter most — it is the safe, practical default. Choose **AVIF** when file size is the top priority, such as for large hero images, photo galleries, or HDR content, and you can absorb the slower encoding. For help deciding across all formats, see How to Choose the Right Image Format for the Web.
How to Create WebP and AVIF Files
You can convert existing images without any software. For WebP, convert JPG to WebP or PNG to WebP. For AVIF, convert JPG to AVIF or PNG to AVIF. If you ever need a universally compatible format again, you can also convert WebP to PNG or WebP to JPG. For background, read What Is WebP and What Is AVIF.