AVIF Complete Guide 2026: File Size, Browser Support, vs JPEG / WebP / PNG / HEIC, How to Open & Convert

What is AVIF?

AVIF stands for AV1 Image File Format. It stores still images (and animated sequences) using the same compression algorithms as the AV1 video codec — the codec used by YouTube, Netflix, Discord, and most modern video streaming platforms. The idea: if AV1 can compress video frames with extraordinary efficiency, those same algorithms can compress individual still images even better because there is no motion to track between frames.

AVIF was developed by the Alliance for Open Media (AOM), a consortium that includes Google, Apple, Microsoft, Mozilla, Amazon, Netflix, Intel, and Samsung. It was standardized in 2019 and is 100% royalty-free — unlike older codecs like H.264/JPEG XL that carry patent licensing costs.

The file extension is .avif for still images and .avifs for animated sequences (though both usually use .avif). The MIME type is image/avif.

Why AVIF matters now

Chrome saves screenshots as AVIF by default. Google Photos exports downloads as AVIF. Android phones use AVIF for camera captures on supported hardware. If you have received a file you cannot open, or if your website images are larger than they need to be, AVIF is directly relevant to you right now.

Real File Size Numbers

All numbers below are from encoding a single 4000×3000 pixel photograph using each format's reference encoder at the stated quality setting. "Equivalent quality" means visually indistinguishable to most viewers at normal viewing distance.

Key insight: AVIF quality 60 delivers equivalent visual quality to JPEG 80, at half the file size. For a typical 100-image e-commerce site, switching from JPEG to AVIF saves roughly 50–60 MB of bandwidth per page view cycle.

File size — transparent images

Browser Support Table (2026)

Global browser support for AVIF is approximately 90–93% as of mid-2026. The remaining 7–10% is primarily older iOS devices (pre-iOS 16) and older Samsung Internet. Always use the <picture> element with a fallback:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" width="800" height="600">
</picture>

This pattern serves AVIF to 93% of visitors, WebP to the next 4%, and JPEG to any remaining browsers — zero quality compromise, maximum compatibility.

Software & App Support

AVIF vs JPEG — Full Comparison

JPEG has held the web's top photo-format spot for more than three decades — its spec dates back to 1992. AVIF is the most credible challenger that throne has ever faced, purpose-built from the ground up to replace it.

Verdict: For web delivery of photographs, AVIF wins on every quality and compression metric. JPEG wins on universal compatibility, encoding speed, and email. Use AVIF on your website; keep JPEG for email, print, and maximum-compatibility sharing.

AVIF vs WebP

WebP was Google's previous answer to JPEG. AVIF is the successor. Both are royalty-free and supported in all modern browsers — but there are real differences.

Verdict: AVIF produces smaller files; WebP has better tooling and compatibility. For new projects in 2026, use AVIF with a WebP fallback. For server-side real-time image processing (user uploads, thumbnails), WebP is often more practical due to encoding speed.

AVIF vs PNG

PNG is lossless and supports transparency — it is the standard for screenshots, logos, and graphics that need pixel-perfect quality. AVIF can replace PNG in web delivery contexts but not in all workflows.

Verdict: AVIF is better than PNG for web delivery of transparent images (product photos with transparent backgrounds, logos). PNG remains the standard for screenshots in design workflows, working source files, and anywhere maximum compatibility is required.

AVIF vs HEIC

HEIC (High Efficiency Image Container) is Apple's camera format, used by iPhones since iOS 11. Both AVIF and HEIC are next-gen formats with similar compression, but they come from different lineages.

Verdict: AVIF is the better format for the open web (royalty-free, broader browser support). HEIC is the better choice within the Apple ecosystem (native camera, Photos, Preview integration). If you receive HEIC from an iPhone and need to share it online, convert to AVIF or JPEG — not because AVIF is technically superior for this use case, but because JPEG has universal compatibility.

AVIF Lossless vs Lossy

AVIF supports both compression modes, selectable per-encode.

AVIF Lossy (recommended for photos)

Lossy AVIF discards some data irreversibly in exchange for dramatically smaller files. Unlike JPEG artifacts (blocky, ring-like), AVIF lossy artifacts tend to appear as slight blurring at very low quality settings. At quality 50–70, the results are visually indistinguishable from much higher-quality JPEG files.

• Recommended quality range: 55–70 for web photos
• Below 40: visible softness on fine textures (fabric, hair, text)
• Above 80: diminishing returns — file size grows without visible improvement

AVIF Lossless (for graphics, screenshots)

Lossless AVIF preserves every pixel exactly. It produces files roughly 20% smaller than PNG lossless for photographic content. For vector-like screenshots and graphics with text, PNG lossless is often smaller. Use AVIF lossless when:

• You need exact pixel accuracy (medical imaging, technical diagrams)
• The image will be re-edited and re-exported multiple times (source files)
• You are archiving images and cannot accept any quality loss

For web delivery, lossless AVIF is rarely justified — lossy quality 70+ is visually lossless for most content.

AVIF Transparency (Alpha Channel)

AVIF supports a full 8-bit alpha channel, enabling transparent images that are far smaller than PNG equivalents. The alpha channel can be compressed independently with either lossless or lossy settings — so you can have a high-quality lossy photo layer with a clean, lossless alpha mask.

Practical uses

• Product photos on white/custom backgrounds — remove background, export as AVIF with alpha. ~70% smaller than PNG-24.
• Logos and brand assets on websites — AVIF alpha replaces PNG for web delivery at dramatically smaller sizes.
• Stickers and overlays — animated AVIF with transparency replaces animated GIF + overlay PNG combinations.

AVIF Animation (AVIS)

Animated AVIF (formally called AVIS — AV1 Image Sequence) stores multiple frames with per-frame timing, enabling looping animations similar to GIF or animated WebP. Animated AVIF is typically 5–10× smaller than GIF at significantly higher quality.

Browser support for animated AVIF is slightly below static AVIF (~85% vs ~93%). For animations where you need maximum compatibility, animated WebP with a GIF fallback is still more reliable. For cutting-edge web apps targeting modern browsers only, animated AVIF is the best option.

How to Open AVIF Files

Windows 11

Double-click the .avif file. The built-in Photos app opens it natively — no installation required.

Windows 10

The Photos app in Windows 10 does not support AVIF by default. Solutions:

• Option 1 (recommended): Open Microsoft Store → search "AV1 Video Extension" → Install (free). Afterwards, Photos opens AVIF files natively.
• Option 2: Drag the file into Chrome or Firefox — both browsers open AVIF files directly as images.
• Option 3: Convert the AVIF to JPG first using convertlo.pro/avif-to-jpg.html (free, no upload required).

macOS

Preview on macOS 13 Ventura and later opens AVIF files natively. On macOS 12 Monterey and earlier, use Chrome, Firefox, or convert the file to JPG.

iOS (iPhone / iPad)

iOS 16+ opens AVIF files in the Photos app natively. If you are on iOS 15 or earlier, open the file in Safari or Chrome, or use the Files app to share it to an app that can convert it.

Android

Android 12+ (most phones from 2022 onward) support AVIF natively in the Gallery. On older Android, open the file in Chrome to view it, or use an AVIF converter app.

Linux

GNOME Files (Nautilus 43+) and most modern image viewers on Linux support AVIF. Install libavif for command-line access: sudo apt install libavif-bin (Ubuntu/Debian).

How to Convert AVIF Files

Convert AVIF → JPG / PNG / WebP (online, free)

1. Go to convertlo.pro/avif-to-jpg.html (or avif-to-png, avif-to-webp).
2. Drop your .avif file(s) onto the converter. Up to 20 files at once.
3. Conversion runs entirely in your browser using WebAssembly — zero uploads, zero privacy risk.
4. Click Download to save. Batch download as ZIP for multiple files.

Convert JPG / PNG → AVIF (online, free)

1. Go to convertlo.pro/jpg-to-avif.html (or png-to-avif, webp-to-avif).
2. Drop your source image files.
3. Download the AVIF output. No quality controls needed — default settings are optimized for web use.

Using Sharp (Node.js) — recommended for production

const sharp = require('sharp');

// JPG → AVIF (lossy, quality 60 — recommended for photos)
await sharp('input.jpg')
  .avif({ quality: 60, effort: 4 })
  .toFile('output.avif');

// PNG → AVIF with lossless alpha
await sharp('input.png')
  .avif({ quality: 60, lossless: false })
  .toFile('output.avif');

effort controls encoding speed vs compression (0 = fastest, 9 = smallest). 4 is a good balance for production pipelines. Quality 55–65 is the web sweet spot.

Using ImageMagick (command line)

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

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

# Batch convert all JPGs in a folder to AVIF
magick mogrify -format avif -quality 60 *.jpg

ImageMagick 7.1+ is required for AVIF support. Install: brew install imagemagick (Mac) or via package manager on Linux.

Using Python Pillow

from PIL import Image

img = Image.open("input.jpg")
img.save("output.avif", quality=60)

# AVIF to JPG
img = Image.open("input.avif")
img.convert("RGB").save("output.jpg", quality=90)

Requires Pillow 9.2+ with AVIF support compiled in, or the pillow-avif-plugin package on some systems.

All AVIF conversion pages on Convertlo

Web Developer Implementation Guide

HTML — picture element (zero JavaScript)

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Product photo" width="800" height="600"
       loading="lazy" decoding="async">
</picture>

Always include width and height on the <img> to prevent Cumulative Layout Shift (CLS). Use loading="lazy" for images below the fold; omit it for hero / LCP images (lazy-loading delays LCP).

Next.js (13+ App Router)

Next.js serves AVIF and WebP automatically when you use the Image component. Enable AVIF in next.config.js:

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

The Image component then serves AVIF to browsers that support it, WebP as fallback, and the original as final fallback — automatically and on-demand.

WordPress

WordPress 6.5+ supports AVIF natively in the media library. To serve AVIF automatically:

• Imagify or ShortPixel — converts uploaded images to AVIF and serves them via <picture> element rewriting.
• Cloudflare Images — auto-converts to AVIF/WebP at the CDN edge; no plugin needed.
• WP Rocket (with Imagify) — handles both caching and image format optimization together.

Astro

---
import { Image } from 'astro:assets';
import photo from '../assets/photo.jpg';
---
<Image src={photo} alt="..." format="avif" quality={60} />

Astro's built-in Image component generates AVIF at build time, serving AVIF with a JPEG fallback via the picture element automatically.

CSS background images — use @supports

/* Default fallback */
.hero {
  background-image: url('hero.jpg');
}

/* Browsers that support AVIF */
@supports (background-image: url('x.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

Nginx — serve AVIF with proper headers

location ~* \.(avif)$ {
  add_header Cache-Control "public, max-age=31536000, immutable";
  add_header Vary "Accept";
  types { image/avif avif; }
}

Apache — .htaccess

AddType image/avif .avif
<FilesMatch "\.(avif)$">
  Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

When to Use AVIF (and When Not To)

Use AVIF when:

• Performance is critical — e-commerce, landing pages, Core Web Vitals improvement. AVIF directly reduces LCP on image-heavy pages.
• HDR photography — only mainstream web format that preserves full HDR range from modern cameras and iPhones.
• Product images with transparency — AVIF alpha is 40–70% smaller than PNG-24 for the same quality.
• Modern frameworks — Next.js, Astro, Nuxt handle AVIF generation automatically; zero extra engineering cost.
• New websites targeting 2024+ audiences — 93% global support is high enough for most use cases with a WebP/JPEG fallback.

Do NOT use AVIF when:

• Email newsletters — no email client renders AVIF. Always use JPEG for email images.
• Real-time image processing pipelines — AVIF encoding is 10–50× slower than JPEG. For user-upload thumbnails, use WebP instead.
• Print workflows — JPEG or TIFF remain the industry standard.
• Source / master files — don't store originals as AVIF lossy. Use TIFF, PNG, or RAW. AVIF is a delivery format.
• Audiences with significant older iOS share — if your analytics show >10% iOS 15 or earlier, serve WebP + JPEG fallback; add AVIF when that share drops.

Frequently Asked Questions