How to Convert JPG 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 JPG images to AVIF format using the browser-based tool on this site. No software installation required. You will learn how to add files, use the quality slider, understand the per-file status system, use batch ZIP download, and deploy your AVIF files on the web.

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

What You Need

• One or more .jpg or .jpeg files you want to convert
• A modern browser: Chrome 85+, Edge 85+, or Firefox 93+ (required for AVIF encoding)
• No account, no software, no subscription

Important: AVIF encoding via the HTML5 Canvas API requires a browser with AV1 codec support. Chrome and Edge provide the most reliable encoding. Safari's canvas AVIF encoding may vary by version.

Step 1: Open the Converter

Navigate to dataconversioncenter.com/image-tools/jpg-to-avif/ in Chrome, Edge, or Firefox. If your browser does not support AVIF encoding, a yellow warning banner will appear at the top of the tool. The page loads JSZip from CDN for ZIP download functionality — no other external libraries are required since JPG decoding is handled natively by the browser.

Step 2: Add Your JPG Files

You have two ways to add files:

• Drag and drop: Open your file manager and drag one or more .jpg or .jpeg files directly onto the drop zone labeled "Drop JPG/JPEG 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. You will see an Input Files grid with a card per file showing the filename, file size, and a Ready status badge. Thumbnails are generated using the browser's native JPG decoder — no external library needed.

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

Step 3: Set Your Quality Level

The quality slider in the options bar controls the AVIF compression level:

• Default (85): Recommended for most use cases. Produces excellent visual quality with significant file size reduction. The number 85 represents the quality as a percentage passed to the AVIF encoder.
• 70–80: Suitable for thumbnails and secondary images where maximum compression matters more than absolute fidelity.
• 90–100: For high-fidelity output where file size is less important. Useful for product images, portfolio photos, or archival purposes.

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

Step 4: Choose Download Mode

Before converting, decide how you want to download your AVIF files:

• 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_jpg_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 5: 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 changes from Ready to Converting…
2. The browser creates an HTML Canvas element and draws the JPG image onto it at full resolution.
3. The Canvas API's toBlob('image/avif', quality) method encodes the canvas pixel data as AVIF using the browser's built-in AV1 encoder.
4. The resulting AVIF blob is stored in memory.
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 throughput efficiency.

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 cards for each successfully converted AVIF, showing:

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

Any files that failed to convert are marked with a red Error badge. The most common cause is a browser that does not support AVIF encoding via the Canvas API — switch to Chrome 85+ or Edge 85+ for guaranteed results.

Step 7: Download Your AVIFs

Individual download

Click the ⬇ Download AVIF button on any output card to save that file. The filename is the same as the input with .avif extension.

Download all files

Click Download All AVIFs to trigger sequential individual downloads for all converted files. Depending on your browser settings, you may be prompted to confirm multiple downloads.

Download as ZIP

If you checked "Download as ZIP" before converting, the Download ZIP button downloads a single archive containing all AVIF files. The ZIP is named dataconversioncenter_jpg_to_avif_YYYYMMDDHHMM.zip.

Step 8: Deploy on the Web (Optional)

To serve AVIF on your website while maintaining JPG compatibility for older browsers, use the HTML <picture> element:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <img src="photo.jpg" alt="Description" width="800" height="600">
</picture>

Browsers that support AVIF will request photo.avif; all others will fall back to photo.jpg. Always specify width and height attributes to prevent layout shift (a Core Web Vitals issue).

Troubleshooting

• AVIF encoding fails for all files: Your browser does not support AVIF encoding via the Canvas API. Switch to Chrome 85+, Edge 85+, or Firefox 93+.
• AVIF files are larger than original JPGs: This can happen at quality settings above 90, especially for small images. Lower the quality setting or use the tool for larger images where AVIF's compression efficiency is more pronounced.
• Thumbnails show correctly but conversion fails: The JPG loaded fine but AVIF encoding failed. This is a browser codec issue — try a different browser.
• Files are rejected at the drop zone: Only files with .jpg or .jpeg extensions are accepted. Rename the file if it has an incorrect extension.