AVIF to Base64 Converter

Convert AVIF images to Base64-encoded data URIs — the format used to embed images directly in HTML, CSS, and JavaScript. Upload one or more .avif files and get the full data:image/avif;base64,... string for each, ready to copy with one click. Nothing is uploaded.

How to Convert AVIF to Base64

1. Upload — drag and drop or click to select one or more .avif files.
2. Copy — each file gets its own result card with the full Base64 data URI. Click the Copy button to copy the string to your clipboard.

What Is a Base64 Data URI?

A Base64 data URI is a text-encoded representation of a binary file. For images it looks like this:

data:image/avif;base64,AAAAHGZ0eXBhdmlmAAACA...

The entire image is embedded in the string, so you can include it anywhere text is accepted — no separate file request needed.

Common Uses

HTML <img> tag:

<img src="data:image/avif;base64,AAAA..." alt="My image">

CSS background:

.hero {
  background-image: url("data:image/avif;base64,AAAA...");
}

JSON data:

{ "thumbnail": "data:image/avif;base64,AAAA..." }

Email HTML: Embed images directly in an HTML email to avoid external image blocking.

When Should You Embed Images as Base64?

Base64 encoding increases file size by approximately 33%. For most web pages, using a separate image file is more efficient because the browser can cache it. Base64 makes sense for:

• Small icons and decorative images (under ~5 KB)
• Single-file HTML documents that must be fully self-contained
• Email templates where external images may be blocked
• Data URIs in CSS for generated content

Browser Support for AVIF

AVIF is supported in current versions of Chrome, Edge, Firefox, and Safari (16+), but it isn't universal — older browsers and some email clients don't render it, whether it's linked as a file or embedded as Base64. If you need a guaranteed fallback, use a <picture> element with a WebP or JPEG alternative:

<picture>
  <source srcset="data:image/avif;base64,AAAA..." type="image/avif">
  <img src="fallback.jpg" alt="My image">
</picture>

The browser will use the AVIF source when it's supported and fall back to the <img> tag otherwise.

Frequently Asked Questions

How much larger is a Base64 string compared to the original file? Base64 encoding increases size by roughly 33%. A 100 KB AVIF becomes approximately 133 KB as a Base64 string.

Can I paste this directly into an <img src="..."> attribute? Yes. The output string starting with data:image/avif;base64, is a valid value for the src attribute of any HTML <img> tag in browsers that support AVIF.

Are my files uploaded anywhere? No. The conversion is done by FileReader.readAsDataURL() in your browser. Nothing is sent to a server.

Is there a file size limit? There's no hard-coded limit, but very large images can slow down or stall the browser tab since the whole file is read and encoded in memory. This tool works best for the small-to-medium images that Base64 encoding is actually suited for — large photos are almost always better served as a linked file.

Do all browsers support AVIF images? No. AVIF has strong support in current Chrome, Edge, Firefox, and Safari 16+, but older browser versions don't render it. If you need to support them, pair the Base64 AVIF with a WebP or JPEG fallback using a <picture> element (see above).