AVIF is the modern image format with the best compression-to-quality ratio in mainstream use — typically 30–50% smaller than JPEG at visually identical quality, and roughly half the size of WebP. For websites, app assets, and any context where bandwidth and page speed matter, converting JPG and PNG to AVIF is one of the easiest performance wins available.

This guide explains what AVIF is, when it makes sense, browser support, and the practical mechanics of converting images without losing what matters.

What AVIF Is

AVIF (AV1 Image File Format) is a still-image format derived from the AV1 video codec. It supports lossy and lossless compression, transparency, HDR, wide colour gamut, and animation. It was standardised in 2019 and is now supported in all major browsers.

When AVIF Helps

  • Web page images — Smaller files load faster, improve Core Web Vitals (LCP)
  • E-commerce galleries — Many product images means cumulative bandwidth savings
  • Background and hero images — Often the heaviest assets on a page
  • Mobile-first sites — Smaller files matter more on cellular connections
  • CDN cost reduction — Pay-per-GB pricing benefits directly

When AVIF Doesn't Help

  • Print workflow — Use TIFF or high-quality JPEG
  • Editing source — Keep originals in PNG, TIFF, or RAW
  • Sharing with older systems — Email recipients on legacy software may not see AVIF
  • Very small images — JPEG overhead is so small that AVIF savings are negligible

Browser Support

  • Chrome, Edge, Opera — Supported since 2020
  • Firefox — Supported since 2021
  • Safari — Supported since iOS 16 / macOS Ventura (2022)
  • Older browsers — Need JPEG/WebP fallback via <picture> element

Compression Quality Settings

  • Quality 80–90 — Visually lossless for most photos; good default
  • Quality 60–80 — Acceptable for web use, significant size savings
  • Quality 40–60 — Aggressive; visible artifacts on close inspection
  • Quality below 40 — Only for thumbnails or non-critical content

Typical Size Comparison

A 4000×3000 photo (~12 MP):

  • PNG — ~15 MB
  • JPEG quality 90 — ~3 MB
  • WebP quality 80 — ~1.5 MB
  • AVIF quality 80 — ~700 KB

Savings are most dramatic for photographs with smooth gradients and natural textures.

Fallback Strategy with HTML

The <picture> element lets browsers pick the best supported format:

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

Modern browsers load AVIF; older ones fall back to WebP or JPEG without effort.

Common Pitfalls

  • Converting then discarding originals. Keep PNG/JPEG sources for re-editing
  • Forgetting fallback. Older email clients, embedded webviews may not render AVIF
  • Over-compressing. Quality below 50 visible on faces and gradients
  • Slow encoding ignored. AVIF encoding is slower than JPEG — batch processing matters for large libraries
  • Wrong quality for content type. Logos and graphics may benefit from lossless mode; photos from lossy

Quick Tips

  • Use AVIF for web images first; keep originals elsewhere
  • Quality 75–85 is the sweet spot for photos
  • Implement <picture> element fallbacks for legacy browsers
  • Compare before-and-after side by side to confirm visual quality
  • Skip AVIF for print, RAW workflows, or compatibility-sensitive contexts

Use the AVIF Converter on Popupnote

The AVIF Converter on Popupnote provides a clean tool for converting JPG, PNG, and WebP images to AVIF format — for web developers, designers, and content creators looking to reduce file size without sacrificing quality. The tool runs in your browser without any account required.