A data URI embeds a small resource inline rather than linking to a separate file. Its form is data:[mediatype][;base64],data — for example data:text/plain;base64,SGk= holds the text Hi. Browsers, CSS, and many tools treat it as if it were a fetched file.

When should I use Base64 versus percent-encoding?

Base64 is best for binary or mostly non-ASCII content and adds about 33 percent overhead. Percent-encoding is smaller and stays readable for short, mostly-ASCII text such as inline SVG, but balloons when most bytes need escaping.

Are data URIs good for large images?

Generally no. Inlining is ideal for tiny assets like icons or a few lines of SVG because it removes an HTTP request. For large images the Base64 bloat and loss of separate caching usually outweigh the saved request, so a normal file URL is better.

How is non-ASCII text handled?

The text is first converted to UTF-8 bytes. With Base64 those bytes are encoded directly; with percent-encoding each non-unreserved byte becomes %XX. Either way the original characters round-trip exactly when decoded.

Is my data uploaded anywhere?

No. The tool encodes and decodes entirely in your browser with JavaScript, so the content you embed never leaves your device.

Data URI Encoder — Gera Tools

A data URI lets you embed a resource directly inside HTML, CSS, or JSON instead of linking to a separate file — perfect for tiny icons, inline SVG, or short snippets. This tool builds and decodes data URIs in your browser.

How it works

A data URI has the form data:[mediatype][;base64],data:

The text is converted to UTF-8 bytes.
Base64 mode encodes those bytes with the standard alphabet and emits data:<mime>;base64,<base64>.
Percent-encoding mode leaves unreserved ASCII bytes (A-Z a-z 0-9 - . _ ~) as-is and writes every other byte as %XX, emitting data:<mime>,<percent-encoded>.

Decoding parses the prefix to read the MIME type and detect the ;base64 flag, then reverses the matching transform to recover the original text.

Tips and examples

The text Hi with MIME text/plain and Base64 gives data:text/plain;base64,SGk=. The same text percent-encoded gives data:text/plain,Hi. For inline SVG, image/svg+xml with percent-encoding usually beats Base64 because SVG is mostly ASCII. Remember that Base64 adds roughly 33% size, so reserve data URIs for small assets where saving an HTTP request matters more than bytes on the wire.