What Is AVIF Format? Better Than WebP?

AVIF's Origins: Derived from AV1 Video Technology

AVIF (AV1 Image File Format) is an image format based on the AV1 video codec, released by the Alliance for Open Media (AOMedia) in 2019. AV1 is an open-source, royalty-free video codec jointly developed by major tech companies including Amazon, Apple, ARM, Cisco, Facebook, Google, Intel, Microsoft, Mozilla, and Netflix, designed to replace HEVC/H.265. AVIF extracts a single frame from AV1 as a static image format, inheriting AV1's excellent compression efficiency.

The context of AVIF's release is important: HEIC (HEVC-based image format, Apple iPhone's default format) also has very high compression efficiency, but patent restrictions prevent free use in open-source projects and web standards. AVIF (based on royalty-free AV1) solves this problem, providing the web with an efficient, open, patent-restriction-free next-generation image format.

AVIF vs WebP vs JPG: Compression Efficiency Comparison

At equivalent visual quality, AVIF's compression efficiency significantly surpasses WebP and JPG. Based on averages from multiple independent tests: compared to JPG (quality 85), equivalent visual quality AVIF is about 50% smaller; compared to WebP (quality 80), equivalent visual quality AVIF is about 20–30% smaller. This means if a JPG is 100KB, equivalent quality WebP is about 70KB, and AVIF is about 50KB.

AVIF's advantages are especially pronounced at low quality settings (high compression). JPG produces obvious blocking artifacts at low quality, while AVIF maintains a relatively smooth, natural appearance even at very high compression ratios — making AVIF particularly suitable for scenarios requiring extremely small file sizes (like mobile thumbnails, social media preview images).

AVIF's Unique Features

AVIF is not just "WebP with better compression" — it also supports advanced features that JPG and WebP lack: (1) 10-bit and 12-bit color depth (JPG/PNG/WebP are 8-bit), providing finer color transitions and eliminating banding in gradients; (2) HDR (High Dynamic Range) content, storing high-brightness, high-contrast HDR images; (3) Wide Color Gamut (WCG), supporting wide color gamuts like Display P3; (4) animation support (similar to WebP animation); (5) transparency (alpha channel).

AVIF Browser Support Status

As of 2024, AVIF browser support is quite good but still not as widespread as WebP: Chrome (desktop and mobile) has full support from version 85 (2020); Firefox has full support since version 93 (2021); Safari supports it since version 16 (macOS Ventura, 2022) and iOS 16; Edge (Chromium) has full support from version 121 (2024). Overall support rate is approximately 90–93%, meaning about 7–10% of users are still on browsers that don't support AVIF (mainly older Safari).

AVIF's Main Drawbacks

AVIF is not perfect. The biggest drawback is extremely slow encoding: encoding a high-quality AVIF image is 10–100x slower than encoding equivalent quality JPG, and 5–20x slower than WebP. This makes real-time encoding (like dynamically converting user-uploaded images) impractical — images need to be pre-encoded in batch. Decoding is also slightly slower than JPG, though the gap is narrowing as hardware acceleration becomes more common.

AVIF's encoding speed issue can be mitigated by adjusting the encoding speed parameter (trading some compression efficiency for faster encoding), but even in fastest mode, AVIF encoding is far slower than WebP. Additionally, AVIF's toolchain ecosystem is not as mature as WebP's, and some image processing software and CDNs don't yet have complete AVIF support.

When to Use AVIF vs WebP

Scenarios for using AVIF: photo-heavy websites (photojournalism, photography portfolios) where compression efficiency improvements are most valuable; content requiring HDR or wide color gamut image display; platforms with large image serving needs like Netflix and YouTube Thumbnails (they have resources for batch AVIF encoding). Scenarios for staying with WebP: need for fast conversion (like real-time processing of user-uploaded images); incomplete AVIF toolchain support; need for broader browser compatibility (especially when iOS 15 and below users are a significant proportion).

Three-Tier Format Strategy: AVIF + WebP + JPG

<!-- 最优的三级格式策略 -->
<!-- Optimal three-tier format strategy -->
<picture>
  <!-- 最佳压缩，约90%浏览器支持 -->
  <source srcset="photo.avif" type="image/avif">
  <!-- 良好压缩，约97%浏览器支持 -->
  <source srcset="photo.webp" type="image/webp">
  <!-- 通用回退，100%支持 -->
  <img src="photo.jpg" alt="Photo" loading="lazy">
</picture>

This three-tier strategy gives AVIF-supporting browsers (~90%) the optimal experience, WebP-but-not-AVIF browsers (~7%) use WebP, and the remaining ~3% use JPG. This is currently the best practice in production environments for balancing performance and compatibility.