📸Base64 Image Data URI Generator

Convert an image file locally into a data URI

The file you choose is read inside this page with the browser FileReader. It is never uploaded to a server or sent anywhere.

What a data URI costs you

Base64 turns three bytes into four characters, so the payload grows about 33% over the original, and the data:MIME;base64, prefix adds more on top. The growth figure on screen is the measured value.

It is not a separate file, so the browser cannot cache it on its own. Reuse the same image across pages and the bytes travel again with every HTML or CSS response. Embedded in a stylesheet it makes that stylesheet bigger, which can delay first render, and swapping the image means redeploying code.

You Might Also Need

🔐

Base64 Converter

Encode data to Base64 format or decode it back…

 🖼️

SVG to Base64 Converter

SVG to Base64 data converter

Everything happens inside the browser

Choose an image file and the browser FileReader reads its bytes, encodes them as base64 and assembles the data URI. Nothing is uploaded to a server or sent anywhere, so it works with the network disconnected. A ready-to-paste img tag and a CSS background-image rule are produced alongside, each with its own copy button.

The MIME type comes from the first bytes of the file

The format is decided from the signature bytes at the start of the file rather than the extension. PNG begins 89 50 4E 47, JPEG FF D8 FF, GIF 47 49 46 38, WebP carries RIFF with WEBP at offset 8, BMP is 42 4D and ICO is 00 00 01 00, while SVG is recognized from the start of its text. The exact evidence is printed on screen, and when no signature matches, the fact that the browser-reported type was used instead is flagged separately. Checked October 2026.

It grows, and it will not be cached

Base64 turns three bytes into four characters, so the payload grows about 33% and the prefix adds more. Because it is not a separate file, the browser cannot cache it on its own, and reusing the same image across pages sends those bytes again every time. This tool handles up to 2MB and never resizes or re-encodes the image.

Frequently Asked Questions

Does the image I pick get uploaded?

No. It is read inside this page with the browser FileReader. The file is not transmitted to a server and is not stored anywhere.

Why is the result about 33% larger than the file?

Base64 encodes three bytes as four characters, so the length becomes four thirds of the original, and the data:MIME;base64, prefix is added on top. The measured growth is shown on screen.

What does this tool not do?

It does not resize or re-encode the image, and it does not turn a data URI back into a file. It stops at format detection and base64 encoding.