How to Convert PNG to AVIF: Step-by-Step Tutorial (2026)

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

Connect on LinkedIn →

Overview

This tutorial walks through every step of converting PNG files to AVIF using the free browser-based PNG to AVIF Converter at Data Conversion Center. AVIF is a modern format that delivers 50–80% smaller file sizes than PNG at comparable visual quality — making it ideal for web-served images. The tool runs entirely in your browser: your files are never uploaded to a server.

Before You Start: Browser Requirements

AVIF encoding in the browser requires the Canvas API's toBlob('image/avif') support. This is available in:

• Chrome 94+ (released October 2021)
• Firefox 93+ (released October 2021)
• Safari 16+ (released September 2022)
• Edge 121+ (released January 2024)

If you're on an older browser, update to the latest version before proceeding. If your browser doesn't support AVIF encoding, the tool will display an error message on affected files.

Step 1: Open the PNG to AVIF Converter

Navigate to dataconversioncenter.com/image-tools/png-to-avif/ in a supported browser. You'll see a drop zone at the top of the tool and an options bar below it with a quality slider and ZIP mode toggle.

Step 2: Add Your PNG Files

There are two ways to add files:

• Drag and drop: Drag one or more .png files from your file explorer directly onto the drop zone. The zone will highlight blue when you hover over it with files.
• Browse: Click anywhere on the drop zone (or the "Browse Files" link) to open a system file picker. Select one or more PNG files.

After adding files, thumbnails generate immediately in the Input Files section. Each card shows the filename, file size, and a "Ready" status badge. Non-PNG files are automatically rejected with an inline warning message.

Step 3: Set Your Quality Level

The quality slider controls the AVIF output quality on a scale of 1 to 100:

• 80 (default): Excellent quality for web images. Visually near-identical to the PNG original at typical screen densities, with file sizes typically 60–75% smaller than PNG.
• 90–100: Near-lossless. Use for design assets, logos, or images that will be zoomed. File savings are more modest (~20–40% over PNG).
• 60–74: Aggressive compression. Best for thumbnails or non-critical decorative images.

The quality value displays next to the slider in real time as you drag it.

Step 4: Choose Your Download Preference

The ZIP mode toggle controls how converted files are downloaded:

• Unchecked (default): Each AVIF is downloaded individually via the Download AVIF button on its card, or all at once via the Download All AVIFs button.
• Checked: All AVIFs are bundled into a single ZIP file named dataconversioncenter_png_to_avif_YYYYMMDDHHMM.zip using your local time.

You can still download individual files regardless of the ZIP toggle — the per-card download button is always available after conversion.

Step 5: Convert

Click the Convert to AVIF button. The tool processes files in pairs for performance. A progress bar and counter track completion ("Converted 3 of 8…"). Each card's status badge updates from Ready → Converting… → Converted (or Error).

If a file fails to encode (for example, because your browser doesn't support AVIF encoding), its card shows a red Error badge with an error message. Successful conversions proceed normally.

Step 6: Review and Download

Once conversion completes, a summary banner shows the result ("✓ All 8 files converted successfully" or "Completed: 7 succeeded, 1 failed"). The Output Files section below displays each converted AVIF with its new file size. You'll typically see a significant size reduction compared to the input.

Download options:

• Click ⬇ Download AVIF on any individual card to download that file.
• Click Download All AVIFs to trigger individual downloads for all converted files (staggered 120 ms apart to avoid browser limits).
• If ZIP mode is checked, click Download ZIP to get all files in one archive.

After downloading, click Start Over to reset the tool and process another batch.

Step 7: Deploy with Browser Fallback

For production web use, implement AVIF with a fallback for browsers that don't support it. The HTML <picture> element is the standard approach:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.png" alt="Hero image" loading="lazy">
</picture>

Browsers that support AVIF will download only hero.avif. Others fall through to WebP or PNG. Only one source is downloaded — there is no performance penalty for providing fallbacks.

Tips and Common Issues

• Large files take longer: AVIF encoding is computationally intensive. A 10 MB PNG may take 5–15 seconds per file depending on your device's CPU.
• Transparency is preserved: AVIF supports alpha channel transparency. PNGs with transparent backgrounds will have their transparency preserved in the AVIF output.
• Test at multiple sizes: After converting, compare the original PNG and the AVIF at 1× and 2× zoom to verify quality meets your requirements.
• Not for emails: Most email clients don't support AVIF. Use PNG or JPG for any images destined for email campaigns.

Related Tools & Guides