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.
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.
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.
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.
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.
Note
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.
At a glance
- Type
- Image format
- Compression
- 50% vs JPEG, 20-30% vs WebP
- Support
- ~92% of browsers
- Features
- HDR, WCG, lossy, lossless, alpha
How Atomic Glue helps
Atomic Glue implements AVIF-first image strategies using build-time generation and CDN auto-conversion. Web Development services.
Get in touchUnderlined terms have their own entry. Selecting one shows it on the map below.
Atomic Glue. "AVIF." Glossary.atomicglue.co/glossary/avif
How AVIF connects
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.
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.
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.
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.
Deployment Strategy
Serve AVIF as the primary format via 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.
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 with WebP and JPEG fallbacks.