Key takeaways
- At equal visual quality AVIF files are the smallest, WebP in the middle, JPEG the largest — typically 20-50% apart on photographic content.
- AVIF encoding is far slower than WebP or JPEG: fine for a build pipeline that runs once, painful for on-the-fly conversion.
- JPEG still wins universal compatibility; AVIF and WebP cover the vast majority of current browsers but not older apps and embeds.
- The practical production stack: serve AVIF with a WebP fallback and a JPEG last resort, chosen by the <picture> element.
- WebP and AVIF support alpha with lossy or lossless color coding; JPEG requires a solid background.
The Three Formats at a Glance
JPEG (1992): Discrete Cosine Transform, 8-bit colour, universal support, optimised over 30 years. Still 40%+ of all images on the web.
WebP (2010): VP8-derived prediction + entropy coding, supports lossy/lossless/transparency/animation, backed by Google, universal browser support since 2020.
AVIF (2019): AV1-derived intra-frame coding, 12-bit colour, HDR, film grain synthesis, best lossy compression of the three, supported by Chrome/Firefox/Safari 16.4+/Edge.
File Size: AVIF vs WebP vs JPEG
At visually equivalent quality, typical compression results for a 3000×2000 photographic image: JPEG quality 85 → 800 KB; WebP quality 80 → 550 KB; AVIF quality 60 → 400 KB.
AVIF is approximately 20-30% smaller than WebP at equivalent quality, and 50-60% smaller than JPEG. These numbers vary by content: on flat-colour graphics the gap narrows; on noisy film-grain images it widens because AVIF's grain synthesis is a genuine innovation.
In lossless mode, AVIF does not exist as a practical choice (lossless AVIF encoding is experimental). WebP lossless beats PNG by 26%; for lossless, WebP or PNG remain the choices.
Image Quality Comparison
At matched file sizes, AVIF consistently looks better than WebP, which looks better than JPEG. The improvements are subtle at high quality but become dramatic at aggressive compression: at 100 KB for a 2000×1500 image, JPEG is heavily blocked, WebP has mild artefacts, and AVIF is still recognisably clean.
AVIF's advantage comes from AV1's more sophisticated prediction modes (60+ intra-prediction directions vs WebP's 4 and JPEG's none beyond DCT), better loop filters that remove blocking at edges, and the ability to store metadata for film grain synthesis rather than spending bits on noise.
At quality settings above 80 (for AVIF) or 85 (for WebP/JPEG), the visual difference is negligible for normal viewing. The compression advantage matters most for image-heavy sites (news, photography, e-commerce) and users on constrained connections.
Encoding and Decoding Speed
AVIF encoding is significantly slower than WebP or JPEG. This is a trade-off for better compression: the AV1 intra-coder searches more prediction modes, applies multiple loop filters, and uses arithmetic coding. A single 4K image encode might take 30-120 seconds with a good encoder (avifenc) vs 1-5 seconds for WebP vs under 1 second for JPEG.
This means AVIF is impractical for real-time user uploads (a 'convert my photo now' flow cannot wait 60 seconds). It is ideal for build-time or CDN-time preprocessing where a worker pool encodes in the background.
Decoding is fast on modern hardware (all three formats decode in <10 ms for typical web sizes), so the user-side viewing experience is identical. The slowness is encode-time only.
Browser Support in 2026
AVIF: Chrome 85+ (all platforms), Edge 121+, Firefox 93+, Opera 71+, Safari 16.4+ (macOS Ventura / iOS 16.4). As of 2026, approximately 82% of global browser traffic supports AVIF.
WebP: universal. Chrome 17+, Edge all, Firefox 65+, Safari 14+, Samsung Internet, all modern Android browsers. Approximately 98%+ coverage.
JPEG: 100% universal.
The practical recommendation: serve AVIF as the <picture> <source>, WebP as the second <source>, JPEG/PNG as the <img> fallback. Users on modern browsers get the smallest files; everyone else gets a working image.
Advanced Features
AVIF supports: 12-bit per channel colour (vs 8-bit in WebP and JPEG), HDR (PQ/HLG transfer functions), full colour gamut (BT.2020), film grain synthesis, alpha channel in both lossy and lossless modes, tiled encoding for progressive loading.
WebP supports 8-bit color, alpha with lossy or lossless color coding, and animation. The lossless-versus-lossy guide explains why preserving transparency does not imply preserving every color sample.
JPEG supports: 8-bit, basic progressive or baseline modes, no transparency, no HDR (though JPEG XL, the intended successor, does).
For ordinary delivery, 8-bit sRGB is often a practical baseline. HDR and wide-gamut workflows need explicit support throughout decoding, editing, and export. The color-profile guide explains why a browser conversion is not a guarantee that the source's gamut or bit depth survives.
When to Use Each Format
AVIF: image-heavy sites where bandwidth cost is the primary concern, sites with long-lived images (product catalogues, news archives, stock photography) where the encode time is amortised over thousands of views, and new builds that can target AVIF-first with WebP fallback.
WebP: when you need a single format that works everywhere, supports transparency, is fast to encode, and gives good compression. The safest 'default modern format' in 2026.
JPEG: when universal compatibility is the priority (email, user uploads, print-ready export), when encoding must be near-instant, or when the image is already well-compressed and the savings from switching format would be marginal.
When an editor cannot open an AVIF download, use AVIF to PNG for a compatible still-image copy. The AVIF conversion walkthrough covers that handoff; the WebP-to-JPG guide addresses recipients that require JPEG. Preserve modern originals separately so one compatibility request does not redefine your entire publishing workflow.
Frequently asked questions
The questions people ask most about avif vs webp vs jpg: a practical comparison, answered directly.