What is AVIF and why use it?
AVIF (AV1 Image File Format) is an image format derived from the AV1 video codec, standardized by the Alliance for Open Media in 2019. It uses much more sophisticated compression than JPG (intra-frame prediction, advanced transforms, context-adaptive entropy coding) and as a result reliably produces smaller files at the same visual quality.
For modern web pages where image weight drives Largest Contentful Paint, AVIF is the most aggressive optimization available. Typical savings: 50% versus JPG at matched quality, 30% versus WebP. On a 5 MB PNG, that's a 1–1.5 MB AVIF — page-load-saving territory.
How the conversion works in your browser
Modern browsers ship an AVIF encoder built into the Canvas API. When you drop a PNG, the tool decodes it into a canvas and calls canvas.toBlob('image/avif', 0.7). Your browser's encoder does the actual AVIF compression locally — same code path the browser uses internally when saving from the right-click menu, just programmatically triggered.
Browser support for AVIF encoding (not just decoding) is more recent. Chrome added it in 85 (2020), Firefox in 113 (2023), Safari in 16 (2022). On older browsers, the canvas call returns null and the tool surfaces a clear error so you can switch browsers.
How to use this tool
- Drop your
.pngfile onto the drop zone above. - The image decodes into a canvas; the canvas re-encodes as AVIF at quality 0.7 through your browser's built-in encoder.
- Click Download. The widget shows the new file size and the percentage saved. Expect 40–70% smaller than the source PNG, depending on image content.
Should you ship AVIF directly, or with a fallback?
In 2026, AVIF support sits at roughly 95% of global browser market share — broadly safe but not universal. For production sites you have two reasonable strategies:
- AVIF + JPG fallback via
<picture>. Modern browsers get the AVIF, older browsers fall back to JPG. Zero JavaScript, no UA sniffing. - AVIF only. Saves implementation complexity. Use when you know your audience uses modern browsers (B2B SaaS targeting Chrome / Firefox / Safari users; design portfolios; product pages on Shopify with a 95%+ modern-browser audience).
Example HTML fallback markup:
<picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="…" /> </picture>