PERFORMANCE

Home › Glossary › Performance· 46 ·

AVIF

/ˈeɪvɪf/n.

Filed underPerformanceContent StrategyDesign

In brief · quick answer

AVIF (AV1 Image File Format) is the most compression-efficient image format available, offering 50% smaller files than JPEG and 20-30% smaller than WebP, with HDR and wide color gamut support.

§ 1 Definition

AVIF is an image format based on the AV1 video codec. It delivers significantly better compression than WebP, supports HDR (PQ and HLG transfer functions), wide color gamut (BT.2020, P3), 10/12-bit depth, and lossless compression. AVIF files are typically 50% smaller than JPEG and 20-30% smaller than WebP at equivalent quality. Browser support reached over 90% in 2024-2025.

§ 2 Compression Capabilities

AVIF leverages AV1 intra-frame encoding, the same technology used in modern video compression. This gives it a 50% size advantage over JPEG and 20-30% over WebP. It supports both lossy and lossless compression, monochrome, alpha channels, image sequences, and HDR metadata.

§ 3 Common Misunderstandings

AVIF encoding is significantly slower than WebP (often 5-10x), making it less suitable for on-the-fly conversion. It should be pre-generated at build time or via CDN with caching. Not all editing tools support AVIF yet. Encoding for HDR requires special attention to transfer functions.

§ 4 Deployment Strategy

Serve AVIF as the primary format via <picture> with WebP as the intermediate fallback and JPEG as the final fallback. Use a CDN that supports automatic AVIF conversion with caching. Pre-generate AVIF at build time for static images. Avoid on-the-fly AVIF encoding on request. Tools: avifenc, Sharp, Squoosh.

§ 5 Note

Browser support: ~92% globally as of 2026. Encoding is resource-intensive. Best for static assets that change infrequently. Use build-time generation.

§ 6 In code

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

§ 7 Common questions

Q. When should I NOT use AVIF?: A. When encoding latency matters (on-the-fly), when editing tooling is unavailable, or when browser support gaps (legacy Safari, some desktop browsers) are significant for your audience.

Key takeaways

50% smaller than JPEG, 20-30% smaller than WebP.
Supports HDR, WCG, 10/12-bit depth.
Encoding is slow; pre-generate at build time.
Serve via <picture> with WebP and JPEG fallbacks.

How Atomic Glue helps

Atomic Glue implements AVIF-first image strategies using build-time generation and CDN auto-conversion. Web Development services.

Get in touch

# AVIF

AVIF (AV1 Image File Format) is the most compression-efficient image format available, offering 50% smaller files than JPEG and 20-30% smaller than WebP, with HDR and wide color gamut support.

Category: Performance (also: Content Strategy, Design)

Author: Atomic Glue Performance Team

## Definition

## Compression Capabilities

## Common Misunderstandings

## Deployment Strategy

## Note

Browser support: ~92% globally as of 2026. Encoding is resource-intensive. Best for static assets that change infrequently. Use build-time generation.

## In code

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

## Common questions

Q: When should I NOT use AVIF?

A: When encoding latency matters (on-the-fly), when editing tooling is unavailable, or when browser support gaps (legacy Safari, some desktop browsers) are significant for your audience.

## Key takeaways

50% smaller than JPEG, 20-30% smaller than WebP.
Supports HDR, WCG, 10/12-bit depth.
Encoding is slow; pre-generate at build time.
Serve via <picture> with WebP and JPEG fallbacks.

## Related entries

Last updated July 2026. Permalink: atomicglue.co/glossary/avif