AVIF Image Format Guide: 30% Smaller Than WebP

AVIF: The New King of Image Compression

AVIF (AV1 Image File Format) builds on AV1 video coding technology and is the next-generation image format after WebP.

Format	Codec	Size at equal quality	Browser support
JPEG	libjpeg	Baseline	All
WebP	VP8	-25~35%	97%+
AVIF	AV1	-50~60%	92%+
PNG	deflate	3-5x JPEG	All

Key figure: At the same SSIM quality, AVIF is 20-30% smaller than WebP and 50-60% smaller than JPEG.

Why Is AVIF So Small?

Advantages of AV1 Encoding

Intra-frame prediction: Exploits spatial redundancy within the image
Transform coding: Supports transform blocks from 4×4 up to 64×64
Quantization matrices: Finer-grained frequency-domain quantization
Film grain synthesis: Separates film grain and describes it with parameters instead of storing it as pixels

Lossy vs Lossless

Mode	Size comparison	Use case
Lossy (CQ 30)	40% of JPEG	Photos, screenshots
Lossy (CQ 50)	25% of JPEG	Thumbnails, previews
Lossless	50-60% of PNG	Icons, UI assets
Lossy + Alpha	30% of PNG	Photos needing transparency

Browser Compatibility (2026)

Browser	AVIF support	Version
Chrome	✅	85+
Firefox	✅	93+
Safari	✅	16+
Edge	✅	85+
Samsung Internet	✅	15+
IE	❌	Not supported

92%+ coverage — safe to use in production.

Fallback Strategy

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo" loading="lazy">
</picture>

The browser picks the first format it supports, in order.

Converting to AVIF with ToolsKu

Steps

Open the Image Format Converter
Upload an image (JPG, PNG, WebP, and GIF supported)
Select AVIF as the output format
Adjust the quality setting:
- High quality (CQ 20-30): Nearly lossless, 40-50% smaller
- Balanced (CQ 35-50): Right for most scenarios, 50-60% smaller
- High compression (CQ 55-70): Thumbnails/previews, 60-80% smaller
Download the converted result

Conversion Results for Reference

Source image	Original size	AVIF (CQ 35)	Compression	SSIM
Landscape photo (4K)	8.2MB	1.1MB	87%	0.95
Portrait photo	3.5MB	0.5MB	86%	0.94
UI screenshot	1.2MB	0.15MB	88%	0.97
Icon (PNG+Alpha)	45KB	12KB	73%	1.00

AVIF's Special Capabilities

Alpha Channel (Transparency)

AVIF supports lossy compression plus an alpha channel — something JPEG cannot do:

PNG (transparent) 45KB → AVIF (transparent, CQ 35) 12KB → 73% smaller

HDR / Wide Color Gamut

AVIF supports both PQ and HLG HDR transfer functions, plus the BT.2020 wide color gamut:

Feature	JPEG	WebP	AVIF
Bit depth	8-bit	8-bit	8/10/12-bit
Color gamut	sRGB	sRGB	sRGB / BT.2020
HDR	❌	❌	✅ PQ/HLG
Alpha	❌	✅	✅

Animation

AVIF supports animation sequences (AVIS), similar to animated WebP:

Animated GIF 2.5MB → Animated WebP 0.8MB → Animated AVIF 0.5MB

Command-Line Conversion

Using libavif (avifenc)

# Install
# macOS: brew install libavif
# Ubuntu: apt install libavif-bin

# Basic conversion
avifenc input.jpg output.avif

# Set quality (0-63, lower = higher quality)
avifenc -q 30 input.jpg output.avif

# Lossless compression
avifenc --lossless input.png output.avif

# Set speed (0-10, slower = better compression)
avifenc -q 35 -s 6 input.jpg output.avif

Using ImageMagick

# Convert to AVIF
magick input.jpg -quality 65 output.avif

# Batch conversion
magick mogrify -format avif -quality 65 *.jpg

Automatic Conversion with Nginx

# Dynamically serve JPEG as AVIF
map $http_accept $avif_suffix {
  "~*image/avif" ".avif";
}

server {
  location ~* ^/.+\.(png|jpg|jpeg)$ {
    add_header Vary Accept;
    try_files $uri$avif_suffix $uri =404;
  }
}

When the client supports AVIF, the .avif version is served automatically (must be pre-generated).

Best Practices

Use <picture> fallbacks: Three-level fallback AVIF → WebP → JPEG
Pick quality 35-50: The sweet spot for most scenarios
Pre-generate instead of converting dynamically: Generate at build time to avoid server CPU overhead
AVIF for photos, SVG for icons: Vector graphics are not a good fit for AVIF
Use AVIF for alpha images: Replace PNG and cut size by 70%+
Configure CDN auto-conversion: Cloudflare Image Resizing / CloudFront can serve AVIF automatically based on the Accept header