PNG to AVIF: Complete Conversion Guide for Web Performance

By Bill Crawford  ·  March 2026  ·  9 min read  ·  Last updated March 8, 2026

Connect on LinkedIn →

What Is the AVIF Format?

AVIF (AV1 Image File Format) is a modern image format developed by the Alliance for Open Media — the same consortium behind the AV1 video codec used on YouTube, Netflix, and Twitch. Finalized as a specification in 2019 and adopted by major browsers by 2021–2022, AVIF has become the leading next-generation image format for the web.

AVIF uses the AV1 codec for still image compression, which is fundamentally more sophisticated than the algorithms behind PNG, JPG, or even WebP. It achieves this through several advanced techniques: intra-frame prediction, transform coding with large transform units, and a psycho-visual model that allocates more bits to visually important regions. The practical result: AVIF files are typically 50–80% smaller than PNG at equivalent visual quality.

PNG: The Lossless Standard

PNG (Portable Network Graphics) was introduced in 1996 as a patent-free alternative to GIF. It uses lossless compression (DEFLATE), which means the image data is perfectly preserved round-trip — every pixel value in the output matches the input exactly. This makes PNG the natural choice for screenshots, logos, diagrams, and any image where pixel accuracy matters.

PNG's limitation is file size. Because PNG is lossless, it cannot compress photographic images as aggressively as formats that accept some quality loss. A photograph saved as PNG is typically 5–10× larger than the same image saved as a high-quality JPG. For web use, this translates directly into slower page loads, higher bandwidth costs, and worse Core Web Vitals scores.

When Should You Convert PNG to AVIF?

PNG-to-AVIF conversion makes sense in the following scenarios:

• Web-served images. Any PNG used on a public website benefits from AVIF conversion. Smaller files mean faster load times, lower bandwidth costs, and better LCP (Largest Contentful Paint) scores — a key Google ranking signal.
• Product photos and hero images. If you're exporting product images as PNG from design tools (Figma, Photoshop, Sketch), converting to AVIF before uploading to your web server can cut asset size by 60% or more.
• Icons and UI graphics with transparency. AVIF supports full alpha channel transparency, so it can replace PNG for transparent graphics in modern browsers. An AVIF icon with transparency will be smaller than the equivalent PNG.
• CMS and e-commerce image libraries. Sites with hundreds of product images can achieve significant CDN cost savings by converting PNGs to AVIF in bulk.
• Email images. Be cautious here — most email clients do not support AVIF. Use JPG or PNG for email images.

PNG vs AVIF: Format Comparison

Understanding AVIF Quality Settings

Unlike PNG (which is always lossless), AVIF offers a quality spectrum from 1 (maximum compression, minimum quality) to 100 (near-lossless). Choosing the right quality setting is the most important decision when converting PNG to AVIF.

• Quality 90–100: Near-lossless. Suitable for design assets, logos, and images where every pixel matters. File size savings over PNG are modest (~20–40%).
• Quality 75–85: The sweet spot for web delivery. Visually nearly indistinguishable from the original at 1× screen density, with file sizes 50–70% smaller than PNG.
• Quality 60–74: Aggressive compression. Good for thumbnails, background images, and non-critical decorative content. Visible artifacts may appear at 2× or higher screen densities.
• Quality below 60: Heavy compression artifacts. Use only when file size is the absolute priority and image quality is not critical.

Transparency in AVIF

One of AVIF's key advantages over JPG is its support for full alpha channel transparency — just like PNG. When you convert a PNG with a transparent background to AVIF, the transparency is preserved. This makes AVIF suitable as a direct PNG replacement for web graphics that require transparent backgrounds.

In practice, an AVIF logo with transparency at quality 85 will typically be 60–75% smaller than the same PNG, while appearing visually identical to users on Chrome, Firefox, and Safari.

Browser Support and Fallbacks

As of early 2026, AVIF is supported in Chrome 85+, Firefox 93+, Safari 16+, and Edge 121+. Global coverage exceeds 90%. The remaining ~10% includes older browsers (primarily older iOS Safari, older Samsung Internet) and some enterprise environments locked to older browser versions.

The recommended approach for production web use is to serve AVIF with a PNG or WebP fallback using the HTML <picture> element:

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

Browsers that support AVIF use the first source. Those that support WebP but not AVIF use the second. All others fall back to the PNG. The browser downloads only one of the three sources — there is no performance penalty for including fallbacks.

Impact on Core Web Vitals (LCP)

Largest Contentful Paint (LCP) measures how long it takes for the largest visible element on a page to load. For most pages, this is an image — often a hero image or product photo. LCP is a direct Google Search ranking signal.

If your hero image is a 600 KB PNG, converting it to AVIF at quality 80 might reduce it to 120–180 KB. That's a 3–5× file size reduction, which directly translates to faster LCP on slower connections. On a 4G mobile connection at 10 Mbps, a 600 KB PNG takes about 480 ms to load; a 150 KB AVIF takes about 120 ms — a difference of over 350 ms that is clearly measurable in Lighthouse and Core Web Vitals reports.

When Not to Convert PNG to AVIF

AVIF conversion is not always appropriate. Keep images as PNG in these scenarios:

• Email campaigns. Most email clients (Outlook, Apple Mail on older iOS) do not support AVIF. Use PNG or JPG for emails.
• Downloads and archiving. If users will download the image and edit it later, keep it as PNG for lossless fidelity.
• Software that requires PNG. Some tools (design software, document processors) require PNG input. Convert for web only; keep originals.
• Very small images. For images under 1 KB, the overhead of format conversion likely outweighs the savings.

Recommended Conversion Workflow

For web projects, a clean PNG-to-AVIF workflow looks like this: maintain original PNG files as your design source of truth; batch-convert to AVIF at deployment time; serve AVIF via a <picture> element with PNG or WebP fallback; and re-convert when source images change. This keeps your originals lossless while serving the smallest possible files to end users.

Related Tools & Guides