How to Convert AVIF to WebP: 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 WebP 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, use batch mode with ZIP download, and deploy your converted WebP images.

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

What You Need

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

Step 1: Open the Converter

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

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).

As soon as files are added, the tool generates thumbnail previews. 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 .avif are automatically rejected with an inline error message. They are not added to the conversion queue.

Browser compatibility note: AVIF decoding requires Chrome 85+, Firefox 93+, Edge 85+, or Safari 16.4+. On older browsers that do not support AVIF, files will show an Error status. Use Chrome or Edge for best results.

Step 3: Set the WebP Quality

Before converting, use the WebP Quality slider to choose your output quality:

• Default: 90 — Recommended for most use cases. Produces high-quality output at noticeably smaller file sizes than quality 100.
• Higher (91–100): Minimal artifacts, larger files. Use for photography or product images where sharpness is essential.
• Lower (70–89): Smaller files, slightly more compression. Suitable for thumbnails, background images, or bandwidth-constrained delivery.

The quality value applies to all files in the batch — you cannot set different quality levels per file in a single conversion run. If you need different quality levels for different files, process them in separate batches.

Step 4: Choose Download Mode

Decide how you want to receive your WebP files:

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

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

Step 5: Click "Convert to WebP"

Click the blue Convert to WebP button. The button label changes to "Converting…" and is disabled during processing.

For each file in the batch:

1. The status badge changes to Converting…
2. The browser loads the AVIF file as a native <img> element using its built-in AVIF decoder.
3. The decoded image is drawn onto an HTML Canvas element at its full original resolution.
4. The canvas is encoded to a WebP blob using canvas.toBlob('image/webp', quality) where quality is your selected value divided by 100.
5. The status changes to Converted and an output card appears.

Files are processed two at a time for throughput efficiency. The progress bar tracks overall progress — "Converted X of N".

Step 6: 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 a card for each successfully converted WebP showing:

• A thumbnail preview of the converted image
• The output filename — same base name as the input with .webp extension (e.g. photo.avif → photo.webp)
• Output file size (compare to input to see compression savings)
• A per-file Download WebP button

Any files that failed to convert are marked with a red Error badge. The most common cause is using an older browser that does not support AVIF decoding.

Step 7: Download Your WebPs

Individual download

Click the ⬇ Download WebP button on any output card to save that file. The filename matches the input with a .webp extension.

Download All (no ZIP)

With "Download as ZIP" unchecked, click Download All WebPs. 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 WebP blobs in memory and downloads a single timestamped archive — for example, dataconversioncenter_avif_to_webp_202603071430.zip.

Step 8: The Tool Resets Automatically

After a ZIP download or "Download All" completes, the tool resets to its initial empty state. All file references, thumbnails, and cards are cleared. The quality slider returns to 90, and the ZIP checkbox resets to unchecked. Use the Start Over button at any time to manually reset without downloading.

Bonus: Deploying Your WebP Images

After downloading your converted WebP files, here are common deployment patterns:

• Direct replacement: Upload the .webp file in place of the original on your web server or CDN. Update any <img> tags to reference the new filename.
• Progressive enhancement with <picture>: Keep both the original AVIF and the new WebP, and serve both via <picture> as described in the guide. Browsers pick the best format they support.
• CMS upload: Upload the WebP directly to your CMS media library. Most modern CMS platforms (WordPress 5.8+, Webflow, Shopify) accept WebP natively.

Troubleshooting

• File shows Error status: Your browser may not support AVIF decoding. Use Chrome 85+, Edge 85+, Firefox 93+, or Safari 16.4+. On unsupported browsers, AVIF images cannot be decoded client-side.
• Output file is larger than expected: This can happen if the source AVIF was encoded at low quality but you selected a high WebP quality. The WebP encoder preserves the pixel data from the decoded AVIF, but at a higher quality than the original lossy encoding. Try lowering the quality slider.
• Thumbnails not loading immediately: Large AVIF files may take a moment to decode for preview. The conversion will still work — wait for the thumbnail before clicking Convert to WebP.
• ZIP not downloading: Some browsers require a direct user interaction to trigger downloads. Ensure you clicked the Download ZIP button directly rather than via a script or extension.
• Output appears slightly softer than source: This is expected when re-encoding from one lossy format to another. Use quality 90–95 and ensure you are starting from the highest-quality AVIF available.

Next Steps

• Compare file sizes: Check the output size shown on each card versus the input size. You should see WebP files that are somewhat larger than the original AVIF (because AVIF compresses better) but much smaller than equivalent-quality JPG.
• Compress further if needed: Use Image Compressor for additional lossless optimization of the WebP output.
• Resize for different contexts: Use Image Resizer to scale images to specific social media or app dimensions before or after conversion.
• Convert other formats to WebP: For JPG, PNG, or any other format, use Image to WebP for universal format conversion to WebP.

Related Tools