Data URI Generator
Convert any uploaded file, or pasted text with a chosen MIME type, into a data: URI (data:<mime-type>;base64,<data>) — with byte-size stats for the original vs. encoded size, ready to embed inline in HTML, CSS or JSON.
Input
The file is read locally — it is never uploaded.
Output
An image preview appears here for image MIME types.
| Metric | Value |
|---|---|
| No data yet | |
Guides
A data URI (or data URL) embeds a file's content directly inside a string — data:<mime-type>;base64,<data> — so it can be used anywhere a normal URL is expected without a separate HTTP request. This tool builds one from either an uploaded file or pasted text, and reports exactly how much bigger the encoded version is than the original.
How to use it
- Choose a source: Upload File (any file type — image, font, PDF, audio, whatever) or Enter Text (paste raw text, HTML, CSS, JavaScript or SVG markup and pick its MIME type).
- For a file upload, the browser detects the MIME type automatically from the file itself. If it gets it wrong, or you need a different type, tick Override detected MIME type and enter one manually (e.g.
image/png,font/woff2). - Copy the resulting Data URI — it's ready to paste into an
<img src>, a CSSbackground-image: url(...), a JSON field, or an@font-facesrc. - Check the Size & Type table for the detected/chosen MIME type, the original byte size, the encoded data URI size, and the percentage increase.
- If the source is an image, a live Preview renders below the data URI so you can confirm it decoded correctly before using it.
Everything runs locally in your browser — a file you upload is never sent to a server.
Why is the data URI so much bigger than the original file?
Base64 encoding represents every 3 bytes of binary data as 4 ASCII characters, which alone adds about 33% to the size. On top of that, the data:<mime-type>;base64, prefix adds a small fixed overhead. For a short snippet this overhead can dominate — encoding 13 bytes of "Hello, World!" produces a data URI over 3x the original length — but for larger files the percentage increase converges toward the ~33% base64 overhead.
When should I use a data URI instead of a regular file?
Data URIs are useful for small, frequently-reused assets — icons, small background images, web fonts, tiny placeholder images — where saving an HTTP request outweighs the ~33% size penalty and the fact that the asset can no longer be cached independently or shared across pages. For anything larger than a few kilobytes, or an asset reused across many pages, a normal linked file that the browser can cache is almost always the better choice.
Does this work with non-English or emoji text?
Yes. Pasted text is UTF-8 encoded before being base64-encoded, so accented characters, CJK text and emoji all round-trip correctly. (Some older tools use a btoa(unescape(encodeURIComponent(text))) trick that mishandles certain Unicode text — this tool uses TextEncoder directly instead.)
What MIME type should I pick for pasted text?
Match the content: text/plain for plain text, text/html for HTML fragments, text/css for stylesheets, text/javascript for scripts, and image/svg+xml for SVG markup (this is also what makes the SVG preview render). Getting the MIME type right matters if the data URI is consumed by something that inspects it — a browser rendering an <img> tag, for instance, requires an image/* type.
Related
To go the other direction — decoding a data URI or Base64 string back to plain text — use Base64 Decode. For SVG specifically, SVG to Base64 Encode also produces ready-to-paste HTML <img> and CSS background-image snippets alongside the data URI.