Skip to content

image guide

AVIF vs WebP vs JPG — The Definitive Comparison for the Modern Web

Every few years a new image format claims to be the future. AVIF is the current challenger, built on video-codec technology that genuinely outperforms both WebP and JPEG in controlled comparisons. But 'better compression' is not the whole story — encoding speed, software support, and device compatibility all matter. This guide cuts through the marketing to tell you which format to use and when.

Updated September 22, 2026 · 21 questions answered

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.
  • For transparency, remember lossy WebP drops alpha — use lossless WebP or AVIF when an image needs both soft transparency and small size.

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 colour, alpha in lossless mode only, animation (less well-supported than GIF's), simple lossless mode.

JPEG supports: 8-bit, basic progressive or baseline modes, no transparency, no HDR (though JPEG XL, the intended successor, does).

For most web use, these advanced features do not matter — 8-bit sRGB is sufficient for screen display. For HDR monitors, wide-gamut photography sites, and archival, AVIF's extra depth is meaningful.

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.

Frequently asked questions

The questions people ask most about avif vs webp vs jpg: which image format wins in 2026?, answered directly.

Is AVIF better than WebP?

AVIF produces 20-30% smaller files at equivalent visual quality. However, WebP encodes 10-50× faster, has broader device support (98% vs 82%), and handles transparency in lossless mode only (whereas AVIF supports alpha in both modes). For real-time user conversion, WebP is practical. For pre-encoded web images where every KB matters, AVIF wins.

Should I switch from WebP to AVIF?

If you serve pre-generated images (static site, CMS with image pipeline, CDN), yes — add AVIF as the first <source> and keep WebP/JPEG as fallback. If your images are generated on-the-fly from user uploads (social media, forms, instant previews), WebP's faster encoding makes it more practical.

Does Safari support AVIF?

Yes, since Safari 16.4 (March 2023) on macOS Ventura and iOS 16.4. Older Safari versions do not render AVIF. Since approximately 82% of global browser traffic supports it, AVIF + WebP fallback covers effectively everyone.

Why is AVIF so slow to encode?

AV1's intra-frame coding searches 60+ prediction modes, applies multiple loop filters (deblocking + CDEF + RESTORATION), and uses context-adaptive binary arithmetic coding (CABAC). These steps find smaller representations but require more CPU. Software encoders are improving — rav1e and SVT-AV1 have halved encode times since 2022.

Can I view AVIF files in Windows?

Windows 11 supports AVIF natively in the Photos app. Older Windows requires an extension from the Microsoft Store (free 'AVIF Image Extensions'). Most modern browsers (Chrome, Edge, Firefox) display AVIF regardless of OS-level support.

Is AVIF good for transparency?

Yes, and unlike WebP (where transparency forces lossless mode), AVIF supports an alpha channel in both lossy and lossless modes. This means a transparent AVIF image can be as small as a non-transparent one. This is a genuine advantage over WebP for transparent images.

Does AVIF support animation?

Yes, AVIF supports animated images with full alpha and better colour than GIF or animated WebP. However, animated AVIF is the least-supported variant — many viewers and editors handle still AVIF but not animated. For animation, MP4 video is still the most efficient and widely supported.

Will AVIF replace JPEG?

AVIF is technically superior but JPEG's ubiquity means it will persist for decades. The more likely successor for photographic content is JPEG XL (which offers both lossy and reversible-compression modes and is favoured by the photography community), but browser adoption of JPEG XL has stalled compared to AVIF.

What is the best format for Core Web Vitals?

AVIF with WebP fallback in a <picture> element gives the smallest Largest Contentful Paint (LCP) image, because it is 20-30% smaller than WebP at equivalent quality. Fewer bytes download = faster paint = better CWV score.

Can I convert WebP to AVIF without quality loss?

No. WebP in lossy mode has already discarded data — converting to AVIF re-compresses the surviving data. The result looks similar but is not mathematically identical. Converting lossless WebP to AVIF lossless preserves pixels but gains no size advantage.

Does AVIF work in email?

No. No major email client (Outlook, Gmail, Apple Mail) renders AVIF in email body. Use JPEG or PNG for email-embedded images. AVIF is purely for browser-rendered web content.

Is AVIF good for printing?

AVIF's 12-bit colour and wide gamut are theoretically excellent for high-quality print. In practice, print software (Adobe, Quark, CorelDRAW) does not yet accept AVIF. For print workflows, convert to TIFF or PNG.

Can I use AVIF in React or Next.js?

Yes. Next.js Image component outputs AVIF automatically when the browser advertises support (via Accept header). Create React apps and Vite handle AVIF assets like any image import. No special configuration needed.

What CDN or tool generates AVIF?

Cloudflare Images, imgix, Cloudinary, Uploadcare, and Netlify Image CDN all generate AVIF on-the-fly or at build time. For self-hosted, `avifenc` (from libavif), Sharp (Node.js), or Squoosh CLI produce AVIF files.

How do I convert AVIF to PNG or JPG?

Use a browser-based AVIF converter that decodes the AVIF data locally using a WebAssembly AVIF decoder and re-encodes as PNG (lossless, preserving alpha) or JPEG. No software installation or server upload is needed.

Is AVIF lossy or lossless?

Primarily lossy — AVIF's compression advantage comes from its sophisticated lossy coding. Lossless AVIF exists experimentally but produces larger files than lossless WebP or PNG and is not practical for production use.

Can I embed AVIF in HTML?

Yes, using <picture><source type='image/avif' srcset='...'><img src='fallback.webp'></picture>. Browsers that do not support AVIF skip the source and render the fallback.

Is AVIF free of patent royalties?

Yes. AVIF is based on AV1, which is developed by AOMedia (Alliance for Open Media) and explicitly royalty-free. All contributors grant patent licences. This is a strategic advantage over HEIC/HEIF, which involves HEVC patent licensing.

How does AVIF compare to JPEG XL?

JPEG XL offers similar compression with the advantage of reversible (lossless reconstruction) mode and faster encoding. However, browser support is minimal (Firefox only, behind a flag) vs AVIF's broad adoption. AVIF won the browser adoption race; JPEG XL may win the archival/photography one.

Is AVIF good for icons and small images?

At very small sizes (< 1 KB), the container overhead of AVIF can make it larger than an equivalent PNG or WebP. For favicons, tiny icons, and base64-embedded images under 1 KB, PNG or SVG remain better choices.

Will AVIF work on smart TVs and older devices?

Most smart TVs (post-2022, Samsung Tizen, LG webOS) support AVIF natively. Older devices typically do not. If you target a broad device ecosystem, WebP remains the safe middle ground.