How to Convert AVIF to PNG: Step-by-Step Tutorial

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

Connect on LinkedIn →

What This Tutorial Covers

This tutorial walks you through converting AVIF images to lossless PNG format using the browser-based tool on this site. No software installation required. You will learn how to add files, use batch mode with ZIP download, understand transparency handling, and prepare your converted PNG images for deployment in design tools and production workflows.

For background on why you might convert from AVIF to PNG and when each format is the better choice, see the companion AVIF to PNG Complete Guide.

What You Need

• One or more .avif files
• A modern browser with AVIF decoding support: Chrome 85+, Edge 85+, Firefox 93+, or Safari 16.4+
• No account, no software, no subscription

Step 1: Open the Converter

Navigate to dataconversioncenter.com/image-tools/avif-to-png/. The page loads JSZip from CDN for ZIP generation — no installation needed. AVIF decoding uses the browser's native image rendering pipeline, and PNG encoding uses the HTML5 Canvas API's toBlob('image/png') method. All processing runs entirely in your browser tab — your files never leave your device.

Step 2: Add Your AVIF Files

You have two ways to add files:

• Drag and drop: Open your file manager and drag one or more .avif files directly onto the drop zone. The zone highlights in blue when you hover over it.
• Browse: Click anywhere on the drop zone (or the "Browse Files" link) to open your file picker. Select multiple files using Ctrl+click (Windows) or Cmd+click (Mac).

After adding files, thumbnails generate immediately using the browser's native AVIF decoder. You will see input cards for each file showing the filename, file size, and a "Ready" status badge. If a file cannot be decoded — for example, if your browser does not support AVIF or the file is corrupted — the thumbnail will not appear and an error will be shown during conversion.

Step 3: Choose Your Download Preference

Before converting, decide how you want to receive your output files:

• Individual downloads (default): Leave the "Download as ZIP" checkbox unchecked. After conversion, each output card shows an individual download button. Files download one by one.
• ZIP archive: Check "Download as ZIP". After conversion, clicking "Download ZIP" bundles all converted PNGs into a single dataconversioncenter_avif_to_png_YYYYMMDDHHMM.zip file named with your local time.

ZIP mode is strongly recommended for batches of 5 or more files, as it downloads everything in one click and avoids triggering browser download limits.

Step 4: Click Convert to PNG

Click the Convert to PNG button. The tool processes files in parallel pairs for efficiency. For each file:

1. The browser decodes the AVIF using its native image decoder.
2. The decoded pixel data (including the alpha channel for transparent images) is written to an HTML5 Canvas element.
3. The canvas is encoded to a PNG blob using canvas.toBlob('image/png') — this is a lossless encoding step.
4. The output PNG is held in browser memory, ready for download.

The progress bar and per-file status badges update in real time. Files show "Converting…" during processing, then "Converted" on success or "Error" if the file could not be decoded.

Step 5: Download Your PNG Files

Once conversion is complete:

• If you chose individual downloads: Output cards appear below the input cards, each with a "Download PNG" button. Click each button to save the file.
• If you chose ZIP: Click the "Download ZIP" button that appears in the bulk action bar. All converted PNGs download as a single timestamped ZIP archive.

After download, the tool offers a "Start Over" button that clears all files from memory, ready for a new batch. Files are not stored on any server — once you close the tab, everything is gone.

Step 6: Verify Transparency (If Applicable)

If your AVIF source files contained transparent backgrounds — common for product cutouts, logos, and UI components — open one of the converted PNG files in your image editor to verify the transparency was preserved:

• In Figma: drag the PNG file directly into your canvas. Transparent areas will appear with the checkerboard pattern, confirming alpha is intact.
• In Photoshop: open the PNG and check the Layers panel. If the background is transparent, you will see a checkerboard pattern rather than solid white.
• In GIMP: open the PNG, then go to Image > Flatten Image — if it asks whether to flatten with a background color, the alpha channel is present and active.

All transparent pixels should be faithfully preserved. If you see unexpected white or solid fills where transparency should be, this may indicate the source AVIF did not actually contain an alpha channel, or the AVIF was encoded without transparency support.

Deployment and Next Steps

Your converted PNG files are ready to use immediately:

• Design tools: Import into Figma, Sketch, Adobe XD, Photoshop, or Illustrator. PNG is natively accepted by all professional design applications.
• CMS uploads: Upload to WordPress, Shopify, Webflow, or any other platform. PNG is universally accepted.
• Web development: Reference in HTML/CSS as you would any PNG file. Remember that PNG files are larger than AVIF — consider using <picture> elements with AVIF as the primary source and PNG as the fallback for broader compatibility.
• Email: PNG is supported in most modern email clients and is preferable to AVIF for inline images.

Troubleshooting Common Issues

• Thumbnails not generating: Your browser may not support AVIF decoding natively. Use Chrome 85+, Edge 85+, Firefox 93+, or Safari 16.4+. Safari versions before 16.4 do not support AVIF.
• Conversion error on a file: The AVIF file may be corrupted, or use a codec profile not supported by your browser's decoder. Try opening the AVIF in another browser to verify it is valid.
• Output PNG is very large: This is normal. PNG is lossless — a photo AVIF of 100 KB may produce a PNG of 800 KB–1.5 MB. If file size is a concern and you do not need transparency, consider converting to JPG instead.
• Download not triggering: Some browsers block multiple automatic downloads. If individual downloads stop working for large batches, enable the ZIP option for a single download.