Picovert

How AVIF Compression Works: Better Than WebP?

By Picovert Team2026-01-216 min read

AVIF is the newest mainstream image format on the web. It delivers better compression than both JPEG and WebP, produces files that are 40–50% smaller than JPEG and roughly 20% smaller than WebP at the same visual quality, and is now supported by over 92% of browsers globally. Standardized in 2019, AVIF reached broad browser support by 2023 — making it a serious option for any web project today.

What Is AVIF?

AVIF stands for AV1 Image File Format. It is a still-image and animation format derived from the AV1 video codec — specifically, it encodes images as single intra-coded frames of an AV1 video stream. AV1 was developed by the Alliance for Open Media (AOMedia), a consortium that includes Google, Mozilla, Microsoft, Apple, Netflix, and Amazon. The codec is completely royalty-free, which was a key motivation for its creation: it avoids the patent licensing fees associated with HEVC (the codec behind HEIF/HEIC).

Because AVIF is essentially a still frame extracted from an AV1 video, it inherits all the advanced compression technology that AV1 developers spent years refining for video delivery. That research investment is what makes AVIF so efficient compared to formats designed specifically for still images.

AVIF vs JPEG vs WebP: File Size Comparison

Independent benchmarks consistently show the same ranking for image compression efficiency:

  • AVIF vs JPEG — AVIF files are typically 40–50% smaller than JPEG at the same perceptual quality. For a 500 KB JPEG, the AVIF equivalent is often 250–300 KB.
  • AVIF vs WebP — AVIF is roughly 20% smaller than WebP at equivalent quality. WebP is already 25–35% smaller than JPEG, so AVIF compounds that advantage further.
  • AVIF vs JPEG XL — The two formats are competitive; neither has a consistent lead across all image types. JPEG XL has better lossless performance for photographic images, while AVIF edges ahead at very low bitrates (highly compressed images).

One important caveat: AVIF encoding is significantly slower than WebP or JPEG. At equivalent quality settings, AVIF encoding can take 10–50 times longer. For build-time pre-generation of static assets this is acceptable — but for real-time on-the-fly encoding, AVIF is often impractical.

How AVIF Achieves Better Compression

AVIF's compression advantages come from the AV1 intra-frame prediction engine, which is substantially more advanced than the prediction methods used by JPEG (no prediction) or WebP's VP8 codec (which offers 10 prediction modes for luma blocks). AV1 supports over 60 directional intra-prediction modes per block, plus a variety of non-directional modes — enabling the encoder to represent image content with far fewer bits.

  • Advanced intra-prediction — AV1 can predict each coding block from its neighbors using fine-grained directional modes (0° to 180° in 3° increments for larger blocks). The residual after prediction is far smaller, requiring fewer bits to encode.
  • Variable block sizes — AV1 supports block sizes from 4×4 up to 128×128 pixels. The encoder chooses the optimal size for each region, using large blocks for uniform areas and small blocks for fine detail.
  • Chroma subsampling support — AVIF natively supports 4:2:0, 4:2:2, and 4:4:4 chroma subsampling. For photographs, 4:2:0 (same as JPEG) is typical; for text and sharp graphics, 4:4:4 preserves color accuracy.
  • Film grain synthesis — AV1 has a built-in film grain synthesis tool that strips natural grain from the source during encoding and reconstructs it at decode time from a compact parameter set. This saves bits without making the image look artificially smooth.

AVIF Feature Advantages

Beyond raw compression, AVIF supports capabilities that older formats lack:

  • HDR and wide color gamut — AVIF supports 10-bit and 12-bit color depth, enabling HDR content with Display P3 and Rec. 2020 color spaces. JPEG is limited to 8-bit, and WebP also tops out at 8-bit for web delivery.
  • Alpha transparency — Like WebP and PNG (but unlike JPEG), AVIF supports full alpha channel transparency. The alpha plane is encoded using the same AV1 codec, giving it better compression efficiency than PNG's lossless alpha.
  • Lossless and lossy modes — AVIF supports both. Lossless AVIF is rarely smaller than lossless WebP or PNG for typical images, but the option exists.
  • Animation — AVIF supports multi-frame animation using an AVIS (AV1 Image Sequence) container. Animated AVIF files can be significantly smaller than animated WebP or GIF, though encoding animated AVIF is even slower than still AVIF.
  • Chroma subsampling modes — 4:2:0, 4:2:2, and 4:4:4 are all supported, giving control over the quality/size tradeoff in color detail.

AVIF Browser Support

As of 2026, AVIF has broad browser support across modern platforms:

  • Chrome — Supported since version 85 (August 2020)
  • Firefox — Supported since version 93 (October 2021)
  • Safari — Supported since version 16 (September 2022, macOS Ventura / iOS 16)
  • Edge — Supported since version 121 (January 2024, Chromium-based)

Combined global browser support sits at approximately 92–93% as of 2026. The browsers that do not support AVIF are Internet Explorer (deprecated), older Safari versions prior to 16, and some older Chromium-based mobile browsers. For most web projects, 92% support is sufficient — particularly when using a <picture> element with a WebP or JPEG fallback.

AVIF Encoding Speed Tradeoff

The main practical disadvantage of AVIF is encoding speed. At quality settings that maximize compression efficiency, AVIF can be 10–50 times slower to encode than WebP. A WebP conversion that takes 100ms may take 1–5 seconds as AVIF.

This has clear implications for how AVIF should be used:

  • Good for build-time generation — If you pre-generate AVIF files during your build process (e.g., with sharp in a Next.js build), the encoding time is paid once and the resulting files are cached. This is the ideal scenario.
  • Not ideal for real-time on-the-fly encoding — Image CDNs and proxies that convert images on first request can handle WebP quickly, but AVIF may cause unacceptable latency. Most image CDNs now support AVIF with background processing and caching.
  • Use speed presets — Encoders like libaom-av1 and libsvtav1 offer speed presets (0–10). Using a faster preset (e.g., 6–8) reduces encoding time by 3–10x with a modest file-size penalty — a reasonable tradeoff for most content.

When to Use AVIF

AVIF is the right choice when:

  • You pre-generate static assets at build time — E-commerce sites, blogs, and marketing pages that generate image variants during deployment benefit most from AVIF. The file-size savings directly reduce page weight and bandwidth costs.
  • Your audience uses modern browsers — If analytics show that 95%+ of your traffic comes from Chrome, Firefox, and modern Safari, the 92% global support figure becomes even more favorable for your specific audience.
  • Photography-heavy sites — AVIF's compression advantage is most pronounced for photographic content. Gallery sites, portfolio pages, and media-heavy blogs see the greatest file-size reductions.
  • E-commerce product images — Product pages often serve dozens of high-quality images. Converting product images to AVIF can reduce page weight by hundreds of kilobytes per page view, improving Core Web Vitals scores.

When to Use WebP Instead

WebP remains the better choice in several scenarios:

  • Real-time conversion — If you need to convert images on-the-fly (e.g., user uploads, dynamic resizing), WebP's encoding speed makes it far more practical.
  • Broader compatibility requirements — If your audience includes a significant portion of users on older Safari (pre-16) or you need closer to 97–98% browser support, WebP is the safer choice. Its global support is above 97% as of 2026.
  • Simpler toolchain — WebP encoding is supported by nearly every image processing library. AVIF support in older versions of tools like ImageMagick or Pillow may be absent or limited.

How to Convert Images to AVIF

The easiest way to convert PNG, JPEG, or WebP images to AVIF is to use Picovert's PNG to AVIF converter. It runs entirely in your browser — no files are uploaded to any server — and converts in seconds. For other source formats, use the general image converter, which supports AVIF as an output format from any supported input.

For developers processing images in a build pipeline, the sharp library (Node.js) is the most common choice. It uses libvips with AOM AV1 encoder support:

const sharp = require('sharp')
await sharp('input.jpg')
  .avif({ quality: 60, effort: 4 })
  .toFile('output.avif')

The effort parameter (0–9) controls the speed/compression tradeoff. Lower effort values are faster; higher values produce smaller files. For static build pipelines, effort 6–8 is a reasonable balance.

HTML Picture Element for Progressive Enhancement

When serving AVIF on the web, the recommended pattern is to use the HTML <picture> element with fallbacks. Browsers pick the first source they support:

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" width="800" height="600" />
</picture>

This approach gives AVIF-capable browsers the smallest file, falls back to WebP for Chrome and Firefox users who somehow don't have AVIF support, and ultimately falls back to JPEG for legacy environments. The <img> tag's width and height attributes should always be set to prevent layout shift (a Core Web Vitals metric).

If you use Next.js, the built-in <Image> component handles AVIF serving automatically when you set formats: ["image/avif", "image/webp"] in your Next.js config.

To start converting your images to AVIF today, use Picovert's image converter for format conversion or the image compressor to reduce file sizes. Both tools run in your browser with no upload required.