At a glance
| JPEG | WebP | AVIF | |
|---|---|---|---|
| Based on | 1992 DCT standard | VP8 video codec (Google, 2010) | AV1 video codec (AOMedia, 2019) |
| Photo size at equal quality | Baseline | Usually smaller | Usually smallest |
| Transparency | No | Yes | Yes |
| Lossless mode | No | Yes | Yes |
| Animation | No | Yes | Yes |
| HDR / 10-bit | No | No | Yes |
| Encoding speed | Fast | Fast | Slow |
| Opens everywhere | Yes | All current browsers; some older apps no | Current browsers; older Safari/Edge and many apps no |
What your browser supports
Why AVIF is often smaller
AVIF borrows AV1’s toolbox: blocks from 4×4 up to 128×128 pixels, dozens of directional prediction modes, and filters that smooth block edges after decoding. Big smooth areas like sky or studio backdrops can be coded as a few large blocks, while edges get small ones. JPEG is locked to 8×8 blocks everywhere, which is why skies band and edges ring at low sizes.
The trade-off is time. AVIF encoders search many more options, so a large photo can take several seconds, noticeably longer than WebP or JPEG. For one hero image it doesn’t matter; for a thousand product photos, it adds up.
Size claims, honestly
Published comparisons (Google’s WebP study, Netflix’s AVIF work) report average savings, but your images will differ: noisy photos, screenshots and already-compressed files all behave differently. The only reliable number is the one you measure. Drop the same photo into the converter as WebP and as AVIF and compare the real byte counts and the side-by-side view.
Serving both safely
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" width="1200" height="800" alt="…">
</picture>The browser takes the first source whose type it supports and ignores the rest, so every visitor gets a picture.