Data URI Generator

A data URI embeds a file's contents directly inside a URL (data:[mime];base64,…), so you can inline images, fonts, or text into HTML/CSS with no extra request. Paste text (pick a MIME type) or drop a file below to generate one instantly, locally.

How to generate a data URI

There are two ways to use the generator above. For text, type or paste into the input box and pick the matching MIME type from the dropdown — plain text, HTML, CSS, JavaScript, JSON, or SVG. For a file, drag it onto the drop zone (or click to browse) and the MIME type is read straight from the file. Either way the content is Base64-encoded locally and the full data:<mime>;base64,… string appears in the output box. Click Copy and paste it wherever you need it.

What is a data URI?

A data URI is a way to put a file's contents inside a URL instead of pointing to a file on a server. The syntax breaks down like this:

data:[mediatype];base64,[data]
 │        │            │          │
 │        │            │          └─ the Base64-encoded bytes
 │        │            └──────────── encoding flag (base64)
 │        └───────────────────────── MIME type, e.g. image/png
 └────────────────────────────────── the "data" URI scheme

So data:image/png;base64,iVBORw0KGgo… is a complete PNG embedded inline. The browser decodes it and renders it exactly as if it had loaded the file over the network. Common MIME types you'll pair with a data URI:

When should you use data URIs?

The main win is fewer requests: inlining a small asset means the browser doesn't make a separate round trip to fetch it, which helps for tiny, critical things like icons, a small logo, an inline SVG, or a background pattern. But there are real tradeoffs:

• Size: Base64 adds ~33% overhead, so the inlined version is about a third larger than the original bytes.
• No caching: a data URI is re-downloaded with the HTML or CSS that contains it every time — it can't be cached separately like a standalone file.
• Rule of thumb: inline small assets (a few KB); keep larger or reused files as normal URLs served with proper cache headers.

For a deeper look at the format and its tradeoffs, see Data URIs Explained.

Is this private?

Yes. Encoding runs entirely in your browser with JavaScript — your text or file is read into memory and Base64-encoded locally, and nothing is uploaded to any server. You can confirm in DevTools → Network: generating a data URI fires no request.

Frequently asked questions

How do I create a data URI?

Use the generator above. Paste text and choose a MIME type, or drop a file. It Base64-encodes the content locally and produces a string of the form data:<mime>;base64,<data> that you can paste into HTML, CSS, or a URL. Click Copy to grab it.

What MIME type should I use?

Match the MIME type to the content: text/plain for plain text, text/html for HTML, text/css for a stylesheet, application/javascript for a script, application/json for JSON, and image/svg+xml for SVG markup. When you drop a file, the MIME type comes from the file itself, falling back to application/octet-stream for unknown binaries.

Are data URIs bigger than the original file?

Yes — Base64 encoding adds about 33% overhead, so a data URI is roughly a third larger than the original bytes, plus a few characters for the data: prefix and MIME type. That's why data URIs are best for small assets.

Do data URIs work in email?

Support is limited. Many email clients — notably several versions of Outlook — block data URIs in images for security reasons, so inlined data:image URIs are unreliable in HTML email. For email, hosting images and linking them normally is the safer choice.