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

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

Connect on LinkedIn →

What This Tutorial Covers

This tutorial walks you through converting WEBP images to AVIF format using the browser-based tool on this site. No software installation required. You will learn how to add files, choose the right quality setting for your use case, use batch ZIP download, and deploy your AVIF files correctly with a browser fallback.

For background on why you might want AVIF and when to use it over WEBP, see the companion WEBP to AVIF Complete Guide.

What You Need

• One or more .webp files to convert
• A modern browser: Chrome 93+, Edge 93+, Firefox 113+, or Safari 17+ (AVIF encoding requires these versions)
• No account, no software, no subscription

Step 1: Open the Converter

Navigate to dataconversioncenter.com/image-tools/webp-to-avif/. The page loads JSZip from CDN for the optional ZIP download feature. The AVIF encoder uses your browser's built-in Canvas toBlob API — no external library required, no install needed.

Step 2: Add Your WEBP Files

You have two ways to add files:

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

After adding files, thumbnail previews generate immediately in the Input Files grid. Each card shows the filename, file size, and a status badge reading "Ready".

Batch limits: There is no hard limit on the number of files. However, because AVIF encoding is computationally intensive, very large batches (20+ large images) may take a few minutes to process. The tool processes files two at a time to keep the browser responsive.

Step 3: Set Your Quality Level

The quality slider controls the compression trade-off between file size and visual fidelity. The value ranges from 30 (most compressed, most artifacts) to 100 (least compressed, closest to lossless). The default is 80.

Practical guidance:

• Quality 80 (default): Good for most web images — hero photos, blog inline images, product images. Excellent quality with meaningful size reduction over WEBP.
• Quality 90–95: Use when images will be displayed very large (full-screen backgrounds, high-resolution product zoom) or when the source quality must be preserved.
• Quality 65–75: Use for thumbnails, card images, preview grids, and any image displayed smaller than approximately 400px wide.
• Quality 50–65: Use only for tiny icons, low-resolution previews, or bandwidth-critical applications where visible compression is acceptable.

Pro tip: Set a quality value, convert one representative image, and compare the output size to the original WEBP. If the AVIF is not at least 10% smaller, try quality 75 — the sweet spot shifts depending on image content.

Step 4: Choose Your Download Mode

Before converting, decide whether you want individual file downloads or a ZIP archive:

• Individual downloads (default): After conversion, each output card shows a "Download AVIF" button. A bulk "Download All AVIFs" button also appears. Files download one at a time.
• ZIP mode: Check "Download as ZIP" in the options bar. After conversion, the "Download All AVIFs" button becomes "Download ZIP" and downloads a single dataconversioncenter_webp_to_avif_YYYYMMDDHHMM.zip containing all AVIF outputs.

ZIP mode is more convenient when converting 5 or more files. The timestamp in the ZIP name helps you track batches if you convert multiple sets of images.

Step 5: Convert

Click the Convert to AVIF button. The tool:

1. Reads each WEBP file using the browser's Image API and draws it to an HTML Canvas element
2. Calls canvas.toBlob(callback, 'image/avif', quality/100) to request AVIF encoding from the browser
3. If the browser does not support AVIF encoding for a given file, that card shows a red "Error" badge with a descriptive message
4. Successful conversions appear in the Output Files grid with a green "Converted" badge, output filename, and output file size

A progress bar at the top tracks overall completion. The status badge on each Input card updates in real time as files process.

Step 6: Download Your AVIF Files

Once conversion completes:

• Click ⬇ Download AVIF on any output card to download that file individually
• Click Download All AVIFs (or Download ZIP) in the bulk bar to get all converted files at once

After download, the tool automatically resets so you can start a new batch immediately. If you need to convert another set without resetting, click Start Over manually first.

Step 7: Deploying Your AVIF Images

After downloading your AVIF files, replace your existing WEBP references in your HTML with a <picture> element that includes a WEBP fallback for browsers that do not yet support AVIF:

<!-- Before (WEBP only) -->
<img src="hero.webp" alt="Hero image" width="1200" height="600">

<!-- After (AVIF with WEBP fallback) -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

The browser evaluates each <source> from top to bottom, using the first format it can display. Modern browsers serve AVIF; older browsers fall back to WEBP or JPG transparently.

Troubleshooting Common Issues

• "AVIF encoding failed" error: Your browser version does not support AVIF encoding. Update Chrome to 93+, Firefox to 113+, or Safari to 17+. Alternatively, try a different browser.
• Output AVIF is larger than the input WEBP: This can happen with very small images (under 200×200px) or images that are already highly optimized. For small images, the overhead of AVIF's container and header can exceed the compression savings. Keeping the WEBP is the right choice in these cases.
• AVIF file looks blurry or has visible artifacts: Increase the quality setting. For images with fine text or sharp line art, try quality 85–90. AVIF artifacts tend to appear as a soft blur or ringing around high-contrast edges at lower quality settings.
• Browser shows the AVIF fallback image instead of AVIF: Check that your server is sending the correct MIME type for AVIF. The correct MIME type is image/avif. Some older servers may not have this MIME type configured. Add it to your server configuration or .htaccess file.

For a deeper look at the WEBP and AVIF formats, format comparison, and when AVIF is worth the upgrade, see the companion WEBP to AVIF Complete Guide.