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

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

Connect on LinkedIn →

What This Tutorial Covers

This tutorial walks you through converting HEIC and HEIF photos to AVIF using the browser-based tool on this site. No software installation required. You will learn how to add files, understand the per-file status system, use batch ZIP download, and handle errors or browser compatibility issues.

For background on why you might want AVIF over JPG or WebP, see the companion HEIC to AVIF Complete Guide.

What You Need

• One or more .heic or .heif files (typically from an iPhone or iPad)
• A modern browser: Chrome 85+, Edge 85+, or Firefox 93+ (required for AVIF encoding)
• Safari users should update to macOS Ventura / iOS 16.4 or later
• No account, no software, no subscription

Important: AVIF encoding requires a modern browser. If you see the yellow compatibility warning at the top of the tool, switch to Chrome or Edge before proceeding.

Step 1: Open the Converter

Navigate to dataconversioncenter.com/image-tools/heic-to-avif/ in Chrome, Edge, or Firefox. The page loads heic2any (for HEIC decoding) and JSZip (for ZIP packaging) from CDN — no install needed. The browser's native Canvas API handles AVIF encoding.

If the yellow compatibility warning appears at the top of the tool, your browser may not support AVIF encoding. Switch to Chrome 85+ or Edge 85+ for guaranteed results.

Step 2: Add Your HEIC Files

You have two ways to add files:

• Drag and drop: Open your file manager and drag one or more .heic files directly onto the drop zone labeled "Drop HEIC/HEIF files here". 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).

As soon as files are added, the tool generates thumbnail previews for each one. You will see an Input Files grid with a card per file showing the filename, file size, and a Ready status badge.

Note: Files with an extension other than .heic or .heif are automatically rejected with an inline error message and not added to the conversion queue.

Step 3: Choose Download Mode

Before converting, decide how you want to download your AVIFs:

• Individual downloads (default): Leave "Download as ZIP" unchecked. After conversion, each output card has its own Download button, and a "Download All AVIFs" button appears for sequential bulk download.
• ZIP archive: Check "Download as ZIP". After conversion, a single "Download ZIP" button downloads all AVIFs in one file named dataconversioncenter_heic_to_avif_YYYYMMDDHHMM.zip using your local date and time.

For batches of more than 5 files, the ZIP option is strongly recommended to avoid multiple browser download dialogs.

Step 4: Click "Convert to AVIF"

Click the blue Convert to AVIF button. The button label changes to "Converting…" and is disabled while conversion runs.

For each file in sequence:

1. The status badge on the input card changes from Ready to Converting…
2. heic2any decodes the HEIC to PNG pixel data in memory (or the browser decodes natively if supported).
3. The pixel data is drawn to an HTML Canvas element.
4. The browser's native canvas.toBlob('image/avif', 0.85) encodes the canvas as AVIF — using hardware acceleration where available.
5. The status changes to Converted and an output card appears.

The progress bar tracks overall progress — "Converted X of N". Files are processed two at a time for better throughput while keeping browser memory manageable.

Step 5: Review the Results

After conversion completes, a summary banner appears: "✓ All N files converted successfully" or "Completed: X succeeded, Y failed."

An Output Files grid displays cards for each successfully converted AVIF, showing:

• A thumbnail preview (rendered from the same canvas used for encoding)
• The output filename — same base name as the input with .avif extension (e.g. photo.heic → photo.avif)
• Output file size — expect 50–75% smaller than an equivalent JPG
• A per-file Download AVIF button

Files that failed are marked with a red Error badge. The most common cause: the browser doesn't support AVIF encoding. Switch to Chrome or Edge and retry.

Step 6: Download Your AVIFs

Individual download

Click the ⬇ Download AVIF button on any output card to save that file.

Download All (no ZIP)

With "Download as ZIP" unchecked, click Download All AVIFs. The tool triggers sequential browser downloads with a 120 ms delay between each to prevent browser throttling.

Download ZIP

With "Download as ZIP" checked, click Download ZIP. JSZip assembles all AVIF blobs in memory and downloads a single file named, for example, dataconversioncenter_heic_to_avif_202603051709.zip. This is the fastest approach for large batches.

Step 7: The Tool Resets Automatically

After a ZIP download or "Download All" completes, the tool resets to its initial empty state. All thumbnails, cards, and file references are cleared. Click Start Over to reset manually at any point.

Troubleshooting

• Yellow compatibility warning shown: Your browser does not support AVIF encoding. Switch to Chrome 85+, Edge 85+, or Firefox 93+ and reload the page.
• File shows Error — AVIF encoding failed: This confirms a browser compatibility issue. Open the page in Chrome or Edge.
• File shows Error — Could not decode HEIC: The file may not be a genuine HEIC (e.g. a renamed JPG with a .heic extension). Verify the file was captured on an Apple device.
• Thumbnails not generating: Very large HEIC files (48 MP from iPhone 15 Pro) may take 5–10 seconds to decode the preview. The tool will proceed when ready.
• Out of memory on large batches: Processing very large HEIC files requires significant browser memory. Close other tabs and process in smaller batches if needed.

Next Steps After Conversion

With AVIF files ready, here are common next steps:

• Upload to your website: Use the <picture> element with AVIF as the first source and JPG as the fallback for full browser compatibility.
• Upload to a CDN: Most major CDNs (Cloudflare, Fastly, ImageKit) accept AVIF and deliver it natively to supported browsers.
• Further compress: Use Image Compressor if you need to reduce the AVIF size further.
• Resize: Use Image Resizer to scale to target dimensions before deploying.
• Need lossless? Use HEIC to TIFF for pixel-perfect master files before generating AVIF for web.

Related Tools