scriptiii
100% Client-Side

data:image/png;base64,…

Data URI converter

Encode a local file as a data URI for CSS or HTML, or turn a data URI back into the file it claims to be.

Any file up to 6 MB. Images get a live preview; the MIME type comes from the file itself.

Pasting a URI decodes it. Choosing a file encodes it. The direction is inferred from what you give it.

The file is read in this tab and encoded from memory. Nothing is uploaded, and no preview leaves the page.

Short answer: choose a file to get a data URI, or paste one to get the file back. Both sizes are shown, so the 33% Base64 overhead is visible rather than implied.

The shape of a data URI

data:[<mime>][;base64],<data>. Everything before the comma is a header; everything after is the payload. A missing or wrong MIME type is the most common failure — the browser gets valid bytes and still refuses to render them, with no error in the console that points at the cause.

Where the size hurts

For a large image, compress first (image compressor) and keep it as a file; use the Base64 encoder when you need the raw payload for something other than a URI.

Data URI questions

When should an image be a data URI?

For tiny, critical assets: a 1 KB icon, a gradient, a font used above the fold. Inlining removes a request. Beyond about 10 KB the base64 overhead (roughly 33%), the loss of caching and the repeated bytes in every HTML response outweigh the saved request.

Why is the data URI bigger than the file?

Base64 spends four characters for every three bytes, and the prefix adds the MIME type. A 30 KB PNG becomes roughly 40 KB of text. The page shows both sizes and the ratio, so the trade is visible before you paste it into a stylesheet.

Does decoding write a real file?

Yes — the bytes are decoded from the payload and handed to the browser as a Blob download with the extension matching the MIME type. A broken payload is refused instead of producing a file that will not open.

Which payloads are supported?

Both forms: base64 (the usual one, with or without padding) and percent-encoded text — the form people get when they inline an SVG by hand. The page says which one it found, because they are not interchangeable.

Is the file uploaded?

No. The file is read with the File API, encoded in the tab, and never leaves the page. No request is made, which is why it works offline once the page has loaded.

Related tools

Base64 encoderThe encoding behind the payload.WebP to JPGConvert the image before inlining it.Compress imageMake it small enough to inline.All developer toolsSeventeen browser-local tools.