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.
Upload AVIF Images
Drag and drop .avif files here, or click to browse
Select one or multiple files
How to Convert AVIF to Base64
- Upload — drag and drop or click to select one or more
.aviffiles. - 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
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.
