AVIF tools

What you need to know

AVIF (AV1 Image File Format) is a next-generation image format based on the AV1 video codec developed by the Alliance for Open Media. Standardized in 2019, AVIF achieves significantly better compression than JPG, PNG, and WebP, typically producing files 20 to 50 percent smaller than WebP at equivalent visual quality. AVIF supports both lossy and lossless compression, full alpha transparency, 8-bit, 10-bit, and 12-bit color depth, HDR, wide color gamut, film grain synthesis, and animation. Browser support includes Chrome 85+, Firefox 93+, and Safari 16+.

Key points

• AVIF typically produces files 20-50% smaller than WebP and 40-60% smaller than JPG at equivalent quality
• AVIF supports 10-bit and 12-bit color, HDR, and wide color gamut, unlike WebP which is 8-bit only
• AVIF encoding is slower than WebP (3-10x), but decoding is fast on modern devices
• Browser support: Chrome 85+, Firefox 93+, Safari 16+; always provide WebP or JPG fallbacks
• AVIF supports both lossy and lossless compression plus alpha transparency in both modes

Website performance optimization

AVIF is the most efficient format for photographic web content, reducing page weight and improving Core Web Vitals scores. Serve AVIF to supporting browsers with WebP/JPG fallbacks.

HDR and wide color gamut imagery

AVIF supports high bit depth and wide-gamut color more efficiently than older formats, suiting rich photographic content on capable displays, with WebP/JPG fallback for compatibility.

Recommended practices

• Serve AVIF with WebP and JPG fallbacks using the picture element or CDN content negotiation
• Encode AVIF at quality 60-70 for photographic content; this typically matches JPG quality 85 at much smaller sizes
• Keep WebP as the primary fallback format for browsers that do not support AVIF
• Use AVIF for photographic content; for graphics with text, test WebP lossless which may produce smaller files
• Generate AVIF at build time or via CDN; avoid on-the-fly AVIF encoding due to slower encoding speeds

Common mistakes to avoid

• Serving AVIF without fallbacks: Approximately 5-8% of users cannot display AVIF. Always provide WebP or JPG fallbacks to ensure all visitors see your images.
• Using AVIF for simple graphics and screenshots: AVIF excels at photographic content, but for screenshots and logos with flat colors, WebP lossless or PNG may produce smaller files.
• Expecting universal AVIF encoding support: Only Chrome 103+ supports AVIF encoding through the canvas API. For bulk generation, use build tools or server-side encoding.