Upload a file
  1. base64hub
  2. Image tools
  3. AVIF to Base64

AVIF to Base64

Drop an AVIF image and copy it as a data:image/avif URI or plain Base64. Leave it unchanged to keep AVIF’s compression; browsers cannot encode AVIF, so any resize produces another format.

Free no sign-up, no limits Local nothing uploaded Updated Oct 27, 2026
Drop an image here, paste one, or pick it
Input –Output –Size –

Processed in your browser. This page cannot send your data anywhere – how we know

Also try:Image to Base64WebP to Base64

How to convert AVIF to Base64

  1. Drop an .avif file on the box or choose it with the file picker.
  2. Leave Max width, Convert to and Strip metadata (EXIF) empty to encode the original file.
  3. Keep Output as on Data URI, or choose CSS, <img>, Markdown, JSON or plain Base64.
  4. Copy output. The meter shows the input size, the output size and the overhead.

If the preview stays empty, your browser cannot decode AVIF. The file is still encoded correctly; it just cannot be displayed here.

Why you should usually leave AVIF as it is

AVIF exists to be small. For photos it often beats JPEG and WebP at similar visual quality, which makes it attractive for inline placeholders and thumbnails where every byte of Base64 counts.

The catch is encoding. The resize, convert and strip-metadata options redraw the image on a browser canvas, and browsers can export a canvas as PNG, JPEG or WebP, never as AVIF. So:

  • Keep format with a Max width produces a PNG. For a photo, that PNG can be many times the size of the AVIF.
  • Convert to WebP is the closest replacement for size, except in Safari, which cannot encode WebP either and falls back to PNG.
  • Convert to JPEG gives broad compatibility but loses transparency.

If you need a smaller AVIF, resize it with an AVIF-capable tool such as an image editor or a command-line encoder, then encode that file here unchanged.

AVIF in Base64

AVIF uses the same ISO base media file format as HEIC and MP4. The file opens with an ftyp box: four bytes of box size, the letters ftyp and a brand.

BytesBase64
00 00 00 1C ftyp avifAAAAHGZ0eXBhdmlm
00 00 00 20 ftyp avifAAAAIGZ0eXBhdmlm
00 00 00 20 ftyp avis (image sequence)AAAAIGZ0eXBhdmlz

The fifth character changes with the box size, so match on eXBhdmlm or eXBhdmlz from character 9 onward when you detect AVIF in code.

Fallbacks and inlining

A normal AVIF image on a website usually comes with a fallback through <picture>, listing an AVIF source first and a JPEG or WebP after it. You can do that with data URIs too, but then every format is inlined in the HTML and the page carries all of them. For anything bigger than a small placeholder, link the files instead and let the browser download only the one it can use.

To check a Base64 string you received, decode it with Base64 to Image. For WebP, which most browsers can also encode, see WebP to Base64.

FAQ

Which browsers can show an AVIF data URI?

Chrome 85+, Firefox 93+ and Safari 16.4+ on macOS and iOS. Edge has supported it since version 121. In older browsers the image is missing.

Why does resizing my AVIF give me a PNG?

No browser can write AVIF from a canvas, which is what the resize and convert options use. With Keep format the tool falls back to PNG. Choose WebP under Convert to if you need a small file after resizing.

What does an AVIF look like in Base64?

It starts with AAAA, then a character for the header size, then GZ0eXBhdmlm, which is ftypavif. A typical start is AAAAHGZ0eXBhdmlm or AAAAIGZ0eXBhdmlm.