CodesBeautify

AVIF to Base64 Converter

Encode an AVIF image as Base64 and confirm the container really is AVIF before you use it.

AVIF file

Drop a file here, paste from the clipboard, or choose one

AVIF, processed in this tab

Base64
Runs locally in your browser

About the AVIF to Base64 Converter

AVIF wraps AV1 video compression around a still image, and the result is routinely half the size of a comparable WebP and a quarter the size of a JPEG at the same visual quality. That efficiency is what makes inlining worth considering: an AVIF thumbnail small enough to embed would be too large in any older format.

The file is an ISO base media container, the same family as MP4, so the identity lives in a ftyp box a few bytes in. This encoder reads that box and reports the brand it finds. The brand avif marks a single still image and avis marks an image sequence. If the brand is something else, the status line says which type was detected instead, which is how you catch a file that was renamed rather than converted.

Output shapes cover the usual destinations: a plain data URI, a CSS background declaration, an img tag with alt text taken from the file name, a JSON object with the name, type and size, or the raw Base64 alone. The data URI is always labelled image/avif for a genuine AVIF, since a wrong media type is enough to stop some browsers painting it.

Provide a fallback for older browsers with a picture element listing a WebP or JPEG source. Compare formats with WebP to Base64, or decode a string back into a picture with Base64 to Image.

How to use

  1. Choose, drop or paste an AVIF file.
  2. Check the status line for the container brand and the encoded length.
  3. Select the output shape you need, from a data URI to a JSON record.
  4. Copy the encoded output into your page, stylesheet or API payload.

Common questions

What is the difference between the avif and avis brands?
The avif brand marks a single still image, while avis marks an image sequence, which is AVIF for animation.
Do all browsers support AVIF?
Current versions of every major browser do. For older ones, offer a WebP or JPEG source in a picture element.
My file is not recognised as AVIF. Why?
The ftyp box carries a different brand, which usually means the file was renamed rather than actually converted.
How large can an inlined AVIF be?
The same guidance as any format applies: keep it under roughly ten kilobytes, which AVIF makes easier than most.