A way to put the content of a file inside the address itself, as in data:image/png;base64,AAAA…. A browser shows it like a normal picture, without a second request to a server.

When is a data URI a good idea?

For very small pictures, such as icons and tiny backgrounds under a few kilobytes, in e-mail templates, single-file HTML pages and CSS. It saves a request.

When is it a bad idea?

For anything larger than about 100 KB. Base64 is a third larger than the file, it makes the HTML or CSS heavy, and the browser cannot cache the picture on its own. A normal link to the file is better.

Why is the SVG form shorter?

An SVG is already text, so it can be written into the address with only a few characters escaped, while Base64 makes it a third larger. Single quotes replace double quotes so it can sit inside CSS url("...").

Is my picture uploaded?

No. The browser reads the file and makes the text locally.

What is the size limit?

5 MB. A picture that large should not become text in any case.

Image to Base64 Converter Online

How to use

Drop a picture onto the box, paste one with Ctrl+V, or choose a file.
Choose the form you need: the full data URI, the Base64 alone, an HTML img tag, a CSS background-image or a Markdown image. For an SVG there is also a smaller URL-encoded form.
Press Copy, or download the text as a file. The size of the file and of the text is shown.

Examples

A 1×1 PNG

→ data:image/png;base64,iVBORw0KGgo…

Every PNG starts with iVBORw0KGgo in Base64, because every PNG begins with the same eight bytes.

A 3,000 byte picture

→ 4,000 characters of Base64 (33% more)

Base64 turns every 3 bytes into 4 characters.

A small SVG icon, URL-encoded form

→ data:image/svg+xml,%3Csvg … %23ff0000 …

Shorter than the Base64 form and readable.

How it works

The browser’s own FileReader turns the file into a data URI, so no library is needed for the encoding; this is a job the browser already does exactly. The tool adds the ready-to-paste forms, the size comparison and, for SVG, the shorter URL-encoded form, which removes comments and extra spaces and escapes only the characters that would break an address.

The length calculation, the parsing of data URIs, the snippets and the SVG encoding are tested, including that the SVG form decodes back to an equivalent SVG.

Sources

Frequently asked questions

What is a data URI?: A way to put the content of a file inside the address itself, as in data:image/png;base64,AAAA…. A browser shows it like a normal picture, without a second request to a server.
When is a data URI a good idea?: For very small pictures, such as icons and tiny backgrounds under a few kilobytes, in e-mail templates, single-file HTML pages and CSS. It saves a request.
When is it a bad idea?: For anything larger than about 100 KB. Base64 is a third larger than the file, it makes the HTML or CSS heavy, and the browser cannot cache the picture on its own. A normal link to the file is better.
Why is the SVG form shorter?: An SVG is already text, so it can be written into the address with only a few characters escaped, while Base64 makes it a third larger. Single quotes replace double quotes so it can sit inside CSS url("...").
Is my picture uploaded?: No. The browser reads the file and makes the text locally.
What is the size limit?: 5 MB. A picture that large should not become text in any case.

Version history

1.0.1 2026-10-25 — Clarifies the search title with the tool's main task and whether it is free or runs online.
1.0.0 2026-10-07 — First release.

Last updated: 2026-10-25