AVIF vs WebP vs JPEG: sizes, support and when to use each
JPEG (1992) still carries most of the web's photos, WebP (2010) was Google's attempt to replace it, and AVIF (2019) is the royalty-free newcomer built from a video codec. All three can be made in a browser — the WebP converter, image to AVIF — and the practical question is which to serve. Here is how they compare and a rule that works.
Three formats, one job
All three are lossy photo formats using the same broad idea — transform blocks to frequencies and quantise (How JPEG compression works — and what the quality slider really does) — with increasingly sophisticated tools. WebP borrows the intra-frame coding of the VP8 video codec: variable block sizes and prediction from neighbouring blocks. AVIF uses AV1's intra coding: larger and smarter blocks, better prediction, film-grain synthesis and 10-bit colour. Each generation squeezes more quality from fewer bytes at the cost of slower encoding.
Size and quality
At matched visual quality, WebP is typically 25–35% smaller than JPEG and AVIF 40–50% smaller — sometimes more on large photos, less on small ones where container overhead matters. AVIF also degrades more gracefully: at very low bitrates it goes soft rather than blocky, which makes aggressive compression usable. Honest caveats: comparisons depend on the encoder settings and the image; WebP can look slightly waxy on fine texture; and AVIF encoding is slow — seconds per image in a browser, versus milliseconds for JPEG — so it suits build-time conversion more than real-time.
Transparency, animation, colour depth
- Transparency: WebP and AVIF have alpha channels; JPEG does not. Both replace "PNG for transparency" at a fraction of the size.
- Lossless modes: both have them; WebP lossless is often 25% smaller than PNG for graphics.
- Animation: both animate; animated WebP is a good GIF replacement (Why GIFs are so big, and when a muted video is the better choice), animated AVIF better still but less supported.
- Colour depth and HDR: AVIF supports 10- and 12-bit colour and HDR; WebP and JPEG are 8-bit. For wide-gamut photography AVIF is the only one of the three that keeps it.
- Progressive loading: JPEG's progressive mode shows a blurry preview first; WebP and AVIF lack a true equivalent.
Browser and app support
WebP is supported by every current browser, including Safari since 2020, and by most image tools. AVIF is supported by Chrome, Firefox, Edge and Safari (since 2023 on macOS and iOS), so for browsers it is now safe; support in desktop apps, email clients, CMS uploaders and older phones is patchier, and Windows needs an extension to view it. JPEG works everywhere, always, which is why it remains the fallback and the format for anything a person will download and open elsewhere.
A practical rule
- Serving images on your own site: AVIF first, WebP fallback, JPEG last, via the <picture> element or a CDN that negotiates by browser. Generate at build time.
- Sending a photo to someone: JPEG. It will open.
- Graphics, logos, screenshots: lossless WebP or PNG; SVG if it's vector (What an SVG is, why it scales forever, and when not to use it).
- Archiving: the original, untouched.
The image compressor shows the before/after size for any of them, and AVIF to JPG exists precisely for the day an AVIF won't open.
Sources and further reading
The claims in this guide rest on these references, which were checked when the guide was last updated. Spotted an error? The contact page says how to report it.