Skip to main content
Technology & EngineeringFile Formats206 lines

AVIF Image Format

AVIF is a next-generation image format based on the AV1 video codec, offering

Quick Summary18 lines
You are a file format specialist with deep knowledge of the AVIF image format, its AV1 compression foundation, HDR capabilities, and evolving ecosystem support.

## Key Points

- **File extension(s):** `.avif`
- **MIME type:** `image/avif`
- **Compression type:** Lossy or lossless, based on AV1 intra-frame coding. Uses advanced prediction, transform coding, and in-loop filtering.
- **Color depth:** 8-bit, 10-bit, and 12-bit per channel. 10-bit and 12-bit enable HDR content with Rec. 2020, PQ, and HLG transfer functions.
- **Max dimensions:** 8,193 x 4,353 per tile (AV1 frame limit); larger images via tiling grids (e.g., 65,536 x 65,536 with grid items)
- **Transparency:** Full alpha channel (8/10/12-bit), stored as a separate AV1 frame
- **Animation:** Supported (AVIF sequences), dramatically more efficient than GIF
- **Metadata support:** EXIF, XMP, ICC color profiles, CICP color metadata (natively describes HDR transfer functions)
- **HDR:** First-class HDR support with PQ (Perceptual Quantizer) and HLG (Hybrid Log-Gamma) transfer functions
- **Wide gamut:** Rec. 2020 / Display P3 color spaces natively supported
- **Container:** ISOBMFF (ISO Base Media File Format), same family as HEIF/HEIC
- **Chrome:** 85+ (2020)
skilldb get file-formats-skills/AVIF Image FormatFull skill: 206 lines
Paste into your CLAUDE.md or agent config

AVIF (.avif)

You are a file format specialist with deep knowledge of the AVIF image format, its AV1 compression foundation, HDR capabilities, and evolving ecosystem support.

Overview

AVIF (AV1 Image File Format) is derived from the AV1 video codec developed by the Alliance for Open Media (AOMedia), a consortium including Google, Mozilla, Apple, Microsoft, Netflix, and others. The AVIF specification was finalized in 2019. It uses the HEIF container format (same as HEIC) but replaces the patent-encumbered HEVC codec with the royalty-free AV1 codec. AVIF achieves the best compression efficiency of any widely supported image format, often producing files 50% smaller than JPEG and 20% smaller than WebP at equivalent visual quality. Its royalty-free status and backing by major tech companies position it as the likely long-term successor to JPEG for web delivery.

Core Philosophy

AVIF represents the current frontier of image compression: it delivers the same perceptual quality as JPEG and WebP at significantly smaller file sizes, typically 30-50% smaller than WebP and 50-70% smaller than JPEG. Built on the AV1 video codec's intra-frame compression, AVIF inherits years of video codec optimization and applies it to still images.

AVIF's technical capabilities are comprehensive — it supports lossy and lossless compression, 8/10/12-bit color depth, HDR, wide color gamuts, alpha transparency, and animation. This breadth means AVIF can theoretically replace JPEG, PNG, GIF, and WebP with a single format. In practice, adoption is gated by encoding speed (significantly slower than JPEG or WebP) and browser/device support, which is broad but not yet universal.

For web image delivery, AVIF should be your first-choice format with WebP and JPEG as fallbacks. Use the <picture> element or content negotiation to serve AVIF to supporting browsers while falling back gracefully. Accept the slower encoding time as a build-step cost — images are encoded once but decoded millions of times, so optimizing for decode efficiency and small file size is the right tradeoff.

Technical Specifications

  • File extension(s): .avif
  • MIME type: image/avif
  • Compression type: Lossy or lossless, based on AV1 intra-frame coding. Uses advanced prediction, transform coding, and in-loop filtering.
  • Color depth: 8-bit, 10-bit, and 12-bit per channel. 10-bit and 12-bit enable HDR content with Rec. 2020, PQ, and HLG transfer functions.
  • Max dimensions: 8,193 x 4,353 per tile (AV1 frame limit); larger images via tiling grids (e.g., 65,536 x 65,536 with grid items)
  • Transparency: Full alpha channel (8/10/12-bit), stored as a separate AV1 frame
  • Animation: Supported (AVIF sequences), dramatically more efficient than GIF
  • Metadata support: EXIF, XMP, ICC color profiles, CICP color metadata (natively describes HDR transfer functions)
  • HDR: First-class HDR support with PQ (Perceptual Quantizer) and HLG (Hybrid Log-Gamma) transfer functions
  • Wide gamut: Rec. 2020 / Display P3 color spaces natively supported
  • Container: ISOBMFF (ISO Base Media File Format), same family as HEIF/HEIC

How to Work With It

Opening & Viewing

  • Chrome: 85+ (2020)
  • Firefox: 93+ (2021, full support including animated)
  • Safari: 16.4+ (2023)
  • Edge: 121+ (2024, via AV1 decoder)
  • Windows: Windows 11 with AV1 Video Extension; Windows 10 with third-party viewers
  • macOS: Ventura 13.0+ (basic), Sonoma 14.0+ (improved)

Creating & Editing

  • Quality settings: AVIF quality is typically specified as a quantizer value (0-63, lower = better quality) or CRF. For lossy photos, quantizer 20-35 produces excellent results.
  • Speed/effort: AVIF encoding is computationally expensive. Speed presets (0-10 in libavif/aom) trade encoding time for compression efficiency. Speed 6 is a good default; speed 0 produces the smallest files but can take minutes per image.
  • Tiling: Large images benefit from tiling for parallel decode
  • Tools: avifenc (reference encoder), ImageMagick 7.1+, Sharp (Node.js), Squoosh (web app)
  • Command line: avifenc --min 20 --max 28 -s 6 input.png output.avif
  • Sharp: sharp(input).avif({ quality: 50, effort: 4 }).toFile('output.avif')

Converting To/From

  • To AVIF: avifenc -q 30 -s 6 input.png output.avif
  • From AVIF: avifdec input.avif output.png
  • ImageMagick: magick input.jpg -quality 50 output.avif
  • Batch: for f in *.jpg; do avifenc -q 30 -s 8 "$f" "${f%.jpg}.avif"; done
  • Python: import pillow_avif; from PIL import Image; Image.open("in.jpg").save("out.avif", quality=50)
  • HTML fallback: <picture><source srcset="img.avif" type="image/avif"><source srcset="img.webp" type="image/webp"><img src="img.jpg"></picture>

Common Use Cases

  • Web images where maximum compression is needed
  • HDR photo delivery on HDR-capable displays
  • Replacing JPEG and WebP for web performance optimization
  • Mobile apps (smaller downloads, less storage)
  • E-commerce (high-quality product images at low bandwidth cost)
  • Animated content replacing GIF (massive size reduction)
  • Photography portfolios where quality and bandwidth both matter
  • CDN auto-conversion pipelines

Pros & Cons

Pros:

  • Best compression efficiency of any widely supported format (50%+ smaller than JPEG)
  • Royalty-free (no licensing fees, unlike HEVC/HEIC)
  • HDR and wide gamut as first-class features
  • 10-bit and 12-bit depth eliminates banding in gradients
  • Full alpha transparency
  • Animation support
  • Backed by major tech companies (AOMedia)
  • Avoids JPEG's 8x8 block artifacts; uses larger, variable block sizes

Cons:

  • Very slow encoding (10-100x slower than JPEG at high effort settings)
  • Decoding is slower than JPEG (though fast enough for real-time display)
  • Maximum tile size limits require tiling for very large images
  • Relatively new; tooling ecosystem still maturing
  • Some older browsers and applications lack support
  • Complex encoder tuning (many parameters)
  • Animated AVIF support varies across decoders
  • Lossy artifacts differ from JPEG (can appear as smearing rather than blocking)

Compatibility

PlatformSupport
Chrome85+ (August 2020)
Firefox93+ (October 2021)
Safari16.4+ (March 2023)
Edge121+ (January 2024)
Android12+ (native), Chrome on earlier versions
iOS16+ (partial), Safari 16.4+
Photoshop2024+ (limited)
GIMP2.10.32+ with plugin
WordPress6.5+
CloudflareAuto-conversion supported

Practical Usage

Batch convert JPEG images to AVIF with quality comparison

# Convert a single image with good quality/size balance
avifenc --min 20 --max 32 -s 6 photo.png photo.avif

# Batch convert all JPEGs, keeping originals
for f in *.jpg; do
    avifenc -q 30 -s 6 "$f" "${f%.jpg}.avif"
    echo "$f: $(stat -c%s "$f") -> ${f%.jpg}.avif: $(stat -c%s "${f%.jpg}.avif")"
done

# Compare file sizes (JPEG vs AVIF)
echo "JPEG total: $(du -sh *.jpg | tail -1)"
echo "AVIF total: $(du -sh *.avif | tail -1)"

Serve AVIF with automatic fallback in web applications

<!-- HTML picture element with progressive fallback -->
<picture>
    <source srcset="hero.avif" type="image/avif">
    <source srcset="hero.webp" type="image/webp">
    <img src="hero.jpg" alt="Hero image" loading="lazy" width="1200" height="800">
</picture>
# Python (Pillow) — generate AVIF from uploaded images
from PIL import Image
import pillow_avif  # pip install pillow-avif-plugin

def convert_to_avif(input_path, output_path, quality=50):
    """Convert any supported image to AVIF with optimized settings."""
    img = Image.open(input_path)
    # Convert CMYK/palette images to RGB
    if img.mode not in ("RGB", "RGBA"):
        img = img.convert("RGB")
    img.save(output_path, format="AVIF", quality=quality, speed=6)
    return output_path

# Node.js (Sharp) — image processing pipeline
# const sharp = require('sharp');
# await sharp('input.jpg')
#     .resize(1200, 800, { fit: 'inside' })
#     .avif({ quality: 50, effort: 4 })
#     .toFile('output.avif');

Nginx configuration for automatic AVIF content negotiation

# /etc/nginx/conf.d/avif.conf
map $http_accept $avif_suffix {
    default   "";
    "~*avif"  ".avif";
}

server {
    location ~* ^(/images/.+)\.(jpe?g|png)$ {
        # Try AVIF first, then WebP, then original
        add_header Vary Accept;
        try_files $1$avif_suffix $uri =404;
    }
}

Anti-Patterns

Using maximum encoding effort (speed 0) for real-time or batch processing. AVIF encoding at effort 0 can take minutes per image and is meant for archival use. For web pipelines and batch conversion, use speed 6-8 which offers a good compression-to-time ratio. Reserve slow encoding for hero images where every byte matters.

Serving AVIF without a fallback format. Not all browsers support AVIF (notably older Safari and some embedded webviews). Always use the <picture> element with WebP and JPEG/PNG fallbacks, or implement server-side content negotiation based on the Accept header.

Encoding screenshots or text-heavy images as lossy AVIF. AVIF lossy compression can smear sharp edges and fine text, producing visible artifacts around letterforms. Use lossless mode (avifenc -q 100) for screenshots, diagrams, and UI captures, or use PNG/WebP lossless instead.

Ignoring AVIF's slow decode time for image-heavy pages. While AVIF decodes fast enough for individual images, pages with dozens of AVIF images can cause jank on mobile devices. Profile decode performance on target devices and consider WebP for thumbnail grids where decode speed matters more than file size.

Using 8-bit AVIF for HDR content. AVIF supports 10-bit and 12-bit depth specifically for HDR. Encoding HDR source material as 8-bit AVIF loses the dynamic range that makes HDR valuable. Use --depth 10 with appropriate transfer functions (PQ or HLG) for HDR content.

Related Formats

  • JPEG: Legacy format AVIF aims to replace; universal support but much lower efficiency
  • WebP: Google's format; better support and faster encoding, but lower compression efficiency than AVIF
  • HEIC: Uses same HEIF container but patent-encumbered HEVC codec
  • JPEG XL: Competing next-gen format with different strengths (lossless JPEG recompression, progressive decode)
  • WebP2: Experimental successor to WebP, development appears stalled
  • AV1: The video codec AVIF is derived from; AVIF is essentially a single AV1 frame in an ISOBMFF container

Install this skill directly: skilldb add file-formats-skills

Get CLI access →