About

AVIF (AV1 Image File Format) uses the AV1 codec for aggressive lossy and lossless compression, often achieving 50% smaller file sizes than JPEG at equivalent SSIM scores. Embedding AVIF assets as Base64 data URIs eliminates an HTTP round-trip per image, which matters when latency budgets are tight - each request on a 3G connection adds roughly 200 - 400ms of overhead. The trade-off: Base64 inflates payload size by a factor of approximately 1.37× (43 of the original byte count), so inlining a 500KB hero image is a net loss. This tool targets icons, sprites, and UI elements under 20KB where the round-trip cost dominates.

All encoding runs locally via the browser's native FileReader.readAsDataURL method. No server upload occurs. The converter validates AVIF files by inspecting the ISO Base Media File Format ftyp box for the avif or mif1 brand in the first 12 bytes. Note: this tool approximates output size before full encoding completes. Actual Base64 length depends on padding bytes and whether you strip the data: prefix.

Formulas

Base64 encoding maps every 3 input bytes to 4 ASCII characters drawn from a 64-symbol alphabet (A - Z, a - z, 0 - 9, +, /). The encoded output length is calculated as:

L_out = 4 ⋅ ceil(L_in3)

Where L_in = original file size in bytes, and L_out = number of Base64 characters. The complete data URI prepends a MIME header:

dataURI = "data:image/avif;base64," + B64(bytes)

The prefix string data:image/avif;base64, adds 24 characters of overhead. Total payload size including prefix:

S_total = 24 + 4 ⋅ ceil(L_in3) chars

Where S_total = total data URI string length. For MIME-compliant line wrapping (RFC 2045), lines are broken at 76 characters with CRLF delimiters.

Reference Data

Image Format	Typical Compression	Browser Support	Base64 Overhead	Best Use Case for Inlining
AVIF	50% smaller than JPEG	Chrome 85+, Firefox 93+, Safari 16+	×1.37	Small icons < 20KB
WebP	30% smaller than JPEG	All modern browsers	×1.37	Thumbnails, sprites
JPEG	Baseline lossy	Universal	×1.37	Email HTML templates
PNG	Lossless, larger files	Universal	×1.37	Transparency-critical icons
SVG	Vector, text-based	Universal	×1.37 (or inline raw)	Logos, geometric shapes
GIF	Limited palette (256 colors)	Universal	×1.37	Simple animated icons
BMP	Uncompressed	Universal	×1.37	Never inline (too large)
TIFF	Lossless, very large	Limited (Safari only)	×1.37	Not recommended for web
ICO	Multi-resolution container	All browsers (favicon)	×1.37	Favicon data URIs
HEIC	Similar to AVIF (HEVC)	Safari only	×1.37	Not viable for web inlining
Base64 overhead factor: 43 ≈ 1.3333, plus up to 2 padding bytes (=)

Frequently Asked Questions

Base64 encodes every 3 bytes of binary data into 4 ASCII characters. The ratio 43 ≈ 1.333 means a 15KB AVIF file becomes roughly 20KB of Base64 text. Additionally, if the Base64 string is embedded in an HTML or CSS file that is gzip-compressed, the effective overhead drops to around 2 - 5% because Base64 text compresses well.

The practical threshold is around 20KB original file size. Beyond this, the HTTP/2 multiplexing advantage of loading the image as a separate resource outweighs the round-trip savings of inlining. For CSS sprites or critical above-the-fold icons under 5KB, inlining is almost always beneficial. For images above 50KB, use a standard <img> tag with proper caching headers instead.

It depends on context. For embedding directly in HTML (<img src="data:...">) or CSS (background-image: url(data:...)), you need the full data URI prefix. If you are storing the raw Base64 string in a database or API payload and will reconstruct the prefix at render time, strip it to save 24 characters per entry. This tool provides both options.

No. All processing happens entirely within your browser using the native FileReader.readAsDataURL API. The file bytes never leave your machine. You can verify this by disconnecting from the internet after loading the page - the converter continues to function. This makes it safe for encoding sensitive or proprietary image assets.

The tool reads the first 12 bytes of the file as an ArrayBuffer and inspects the ISO Base Media File Format (ISOBMFF) ftyp box. A valid AVIF file contains the string ftyp at byte offset 4, followed by a brand identifier of avif, mif1, or avis. Files that fail this check are rejected regardless of their .avif extension.

Yes. Copy the full data URI output and use it as: background-image: url(data:image/avif;base64,...);. Be aware that older browsers without AVIF support (Internet Explorer, pre-Chromium Edge, Firefox < 93) will fail silently. Always provide a fallback using CSS feature queries or the <picture> element with a WebP or JPEG source.