AVIF in 2026: the web format of the future (really this time)

What is AVIF, technically

AVIF stands for AV1 Image File Format. It's an image format based on the AV1 video codec, itself developed by the Alliance for Open Media — a consortium founded in 2015 grouping Google, Netflix, Mozilla, Amazon, Microsoft, Apple, Meta, and Intel. The initial goal was to create a royalty-free next-generation video codec (unlike HEVC/H.265) for 4K and 8K streaming.

The AVIF idea came naturally: if AV1 compresses video so well, why not use it for still images? AVIF specification was finalized in 2019, and first browser supports arrived in 2020 (Chrome 85). Since then, adoption has been progressive and reached critical mass in 2024-2025.

Technically, AVIF uses AV1's spatial compression tools (block analysis, intra-image prediction, adaptive transformation and quantification) without temporal compression tools (which make no sense for a still image). The result is an image file that can weigh up to 50% less than a JPG at equivalent visual quality, while supporting transparency, HDR, wide color gamut, and even animated images.

AVIF vs WebP vs JPG: the numerical comparison

Take a standard 4000 × 2667 pixel photo (typical resolution of a 12-megapixel digital camera) and export it in three formats at quality 80:

— JPG: 1,240 KB on average. Readable everywhere for 30 years. No transparency. — WebP: 720 KB (–42% vs JPG). Readable by 97% of browsers in 2026. Transparency supported. — AVIF: 480 KB (–61% vs JPG, –33% vs WebP). Readable by 94% of browsers in 2026. Transparency + HDR + wide color.

The gap is even more spectacular on graphics with color flats (logos, vectorized illustrations): a 500 KB transparent PNG can drop to 80 KB in WebP and below 50 KB in AVIF, with no visible difference.

On a typical web page with 20 images on average, going from JPG to AVIF saves typically 8-12 MB of bandwidth per visit, translating to 1-2 seconds less LCP on mobile 4G. For a high-traffic site, it's also substantial CDN savings: if you pay per request (Cloudflare, Vercel, AWS), monthly bill drops proportionally.

Compatibility in 2026: who supports AVIF?

Here's the state of support in 2026 (source caniuse.com May 2026):

Full support: — Chrome (since v85, August 2020) and all Chromium browsers (Edge, Opera, Brave, Vivaldi, Samsung Internet) — Firefox (since v93, October 2021) — Safari on macOS (since v16, September 2022) and on iOS/iPadOS (since v16, September 2022)

Partial or absent support: — Old Safari on iOS 15 and earlier: no native support. With progressive extinction of these versions, we're at about 3% of affected users in 2026. — In-app browsers of social networks: generally up to date but some are behind, especially in Chinese market. — Internet Explorer: zero support, but we don't care in 2026 (market share < 0.5%).

Total in 2026: about 94% of global users can see an AVIF. For the remaining 6%, we serve a WebP or JPG fallback via the HTML <picture> tag. Multi-format strategy is now standard on all professional sites.

Encoding to AVIF: 3 tools in 2026

Method 1 — PixFlow (simplest). Go to pixflow.tech/en/convert-jpg-to-avif or pixflow.tech/en/convert-png-to-avif, drag your files, adjust quality (80 by default, the right compromise), download the AVIFs. 100% local processing in your browser, batch, free unlimited. Ideal for one-off use or catalog preparation.

Method 2 — Squoosh.app (Google Labs). Google's free web tool offering visual comparison between formats. You load an image, see JPG, WebP, and AVIF side by side, finely adjust quality, and download. Excellent for understanding encoding parameter impact. Slower than PixFlow for batch processing.

Method 3 — Sharp / ImageMagick / FFmpeg in command line. For CI/CD build pipelines or automated server-side transformations. Sharp (Node.js library) has become the de facto standard for modern JS frameworks (Next.js, Astro, Eleventy) with native image optimization. ImageMagick remains useful for batch scripts on thousands of images. FFmpeg also knows how to encode AVIF, useful if you also process video.

AVIF encoding time is longer than WebP (typically 5-10 times longer per target quality), because AV1 algorithm explores more compression options. For hundreds of images, expect several minutes in batch. Once encoded, the final file is smaller and stays better quality — it pays off over usage duration.

Serving AVIF in production: the <picture> tag

Once your images are encoded in several formats, deployment happens via the HTML <picture> tag which automatically serves the optimal format per browser:

<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="..." loading="eager" fetchpriority="high" width="1920" height="1080"> </picture>

Order matters: the browser tests <source> in order and serves the first it can decode. So AVIF first (most modern and lightest), WebP as backup, and JPG as last resort for very old browsers.

Remember to add width / height attributes on the <img> tag to reserve space and avoid CLS, and fetchpriority='high' + loading='eager' for critical images (hero, above the fold). Images further down the page can remain loading='lazy' (default) to save bandwidth.

Modern frameworks (Next.js Image, Astro Image, Eleventy Image, Nuxt Picture) automate this whole process: you provide the source image, they generate AVIF/WebP/JPG versions at right sizes and produce the <picture> tag at build. You save development time and consistency.

AVIF limitations and traps in 2026

AVIF isn't magic. Here are the traps to know:

1. Slow encoding. Converting a 500-photo folder to AVIF takes significantly longer than to WebP. For automated pipelines (CI/CD), this can lengthen builds. Mitigation: encode in parallel with as many workers as CPU cores.

2. Not the best format for progressive streaming. JPG progressive lets you display a low-resolution version as soon as first bytes arrive, refining over time. AVIF has no native equivalent — it displays complete once fully downloaded. For images > 200 KB on slow connection, user experience may be less smooth.

3. Traditional editing tools behind. Photoshop added AVIF support in 2023 but via third-party plugin. Lightroom Classic, Affinity Photo, GIMP: uneven support depending on version. If you want to retouch AVIFs, stay in PNG/TIFF for work and export to AVIF only at the end.

4. Incomplete compatibility for in-app browsers. Some browsers integrated in mobile apps (old Facebook, WeChat versions, etc.) don't yet have AVIF support. It's for these 6% of users that WebP/JPG fallback via <picture> remains indispensable.

5. CPU-intensive server encoding. If you generate AVIFs on the fly server-side (instead of pre-encoding at build), it can overload your workers. Solution: pre-generate all variants at build, or use an image CDN service (Cloudinary, Imgix, Vercel Images) that pools the cost.