Data URI Generator
Convert images, SVG and small files to data URIs for inline embedding in HTML, CSS or JSON. Smaller URL-encoding option for SVG.
or drag and drop here. Images, SVG, fonts and small text files all work.
All processing happens in your browser via the FileReader API. Files are not uploaded to any server — verify in DevTools → Network.
A data URI is a string starting with data: that embeds a file’s contents inside the URL — data:image/png;base64,iVBORw0KG… is a complete PNG. Drop a file above to generate one in your browser. SVGs use URL-encoding (20–30% smaller than Base64); binary files use Base64. Ready-to-paste snippets for HTML, CSS and JSON are included.
When are data URIs the right tool?
| Scenario | Use a data URI? | Why |
|---|---|---|
| 1 KB icon used once on the page | ✅ Yes | Saves an HTTP request, no caching downside |
| 50 KB hero image | ❌ No | Bloats HTML by ~67 KB; can’t be cached separately |
| SVG used inline in CSS | ✅ Often yes | Avoids an extra request, supports CSS variables in the surrounding rule |
| Hero or above-the-fold image | ❌ No | Blocks render until HTML/CSS arrives, hurts LCP |
| Email signature graphic | ✅ Yes (modern clients) | No external host needed; works in Gmail and Apple Mail |
| Image gallery | ❌ No | Same image on multiple pages can’t be cached |
| File embedded inside JSON | ✅ Yes | Only practical way to ship a binary blob through a JSON endpoint |
| Web font ≤ 30 KB | Maybe | Inline avoids the FOIT/FOUT delay, but ships every visit — measure first |
What does a data URI look like?
data:[<mediatype>][;base64],<data>
data:image/png;base64,iVBORw0KG…
data:image/svg+xml,%3Csvg…
data:application/json;base64,eyJrIjoidiJ9Three parts: the data: scheme, the optional MIME type and encoding, and the payload. Skip the MIME type and the browser assumes text/plain. Add ;base64 and the payload is treated as a Base64 blob; omit it and the payload is URL-encoded.
Should I use Base64 or URL-encoding for SVG?
For binary formats (PNG, JPEG, WebP, fonts) you have to use Base64 — anything else would balloon the URI to several times the original size.
For SVG (which is just XML text) the choice matters. Base64 always adds ~33% size. URL-encoding only escapes characters that have meaning in a URI — and since SVG is mostly ASCII letters and tag punctuation, the URL-encoded form is typically 20–30% smaller. Some optimization tricks:
- Replace double quotes with single quotes —
"must be encoded but'doesn’t (always — depends on context). Most SVG attributes accept either. - Strip whitespace between tags. SVG doesn’t care about it.
- Only escape
< > # % ? & ( )and a handful of others — leave the rest unescaped.
This tool’s “URL-encoded” mode applies all three.
How do I use a data URI in HTML, CSS and JSON?
HTML — <img src>:
<img src="data:image/png;base64,iVBORw0KG…" alt="Logo" />CSS — background-image:
.icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…");
background-size: contain;
}Inside JSON:
{
"thumbnail": "data:image/png;base64,iVBORw0KG…",
"name": "report-2026-Q1.png"
}As a downloadable link:
<a href="data:application/json;base64,eyJrIjoidiJ9" download="config.json">
Download config
</a>Common data URI mistakes
Embedding too-large files. A 100 KB image becomes a 134 KB data URI in Base64. Multiply that by every page that references it and you’ve blown your HTML budget. The honest cutoff: under 10 KB, almost always fine; 10–50 KB, only if reused on this single page; over 50 KB, just don’t.
Forgetting the cache implication. A regular <img src="/logo.png"> is fetched once and cached for every page that uses it. A data URI is part of the HTML, so it ships every single page load — no shared cache. For repeating assets, link to a real file.
Wrong MIME type. data:image/png,… (without ;base64 and with a Base64 payload) won’t render — the browser will try to URL-decode the Base64. Always include ;base64 when the payload is Base64-encoded.
Encoding URLs as HTML entities or vice versa. Different problem, different encoding. If you need to put a URL inside HTML, URL-encode the URL first; don’t HTML-entity-encode it. Use the URL Encoder/Decoder for that.
Pasting raw SVG into a CSS url() without encoding. Modern browsers will sometimes accept it, but #, %, and parentheses inside the SVG payload break things subtly. Always encode.
Browser and email-client support
All modern browsers support data URIs in <img src>, CSS url(), <a href>, <iframe src> and JSON. Limits:
- Chrome / Edge / Safari / Firefox: practically unlimited size, but performance degrades over a few MB.
- IE11: ~32 KB cap. (You almost certainly do not care.)
- Email clients: modern ones support data URIs in
<img src>. Older Outlook on Windows (Word-rendered) may strip them — link to a hosted image as a fallback.
Privacy
Everything happens in your browser via the FileReader API. The tool never uploads files, never sends them to a server, never logs the file name or size. Open DevTools → Network while generating a URI to confirm — there will be zero requests.
Related tools
- Base64 Encoder / Decoder — for encoding plain text and arbitrary binary blobs to Base64 (without the
data:scheme wrapper). - URL Encoder / Decoder — for percent-encoding URLs and query strings.
- Image Compressor — compress images before generating a data URI to keep the URI small.
Frequently asked questions
- What is a data URI and when should I use one?
- A data URI embeds a file's contents directly inside a URL string using the `data:` scheme — for example `data:image/png;base64,iVBORw0KG…`. Use them for tiny inline assets (CSS-embedded SVG icons, single-use images in email templates, embedding files inside JSON), and avoid them for anything over ~10 KB or any image reused across pages — data URIs aren't cached separately, so they bloat every HTML/CSS file that references them.
- Why is URL-encoding sometimes smaller than Base64 for SVG?
- Base64 encodes 3 bytes of input into 4 ASCII characters — a fixed ~33% size penalty. URL-encoding (percent-encoding) only escapes characters that have special meaning in a URI, leaving most ASCII unchanged. Since SVG is mostly ASCII text, URL-encoding typically produces a URI that's 20–30% smaller than the equivalent Base64. For binary formats like PNG and JPEG, Base64 is the only sensible option — URL-encoding a binary file would explode it to >300% of the original size.
- Are my files uploaded anywhere when using this tool?
- No. The tool reads files entirely with the browser's `FileReader` API, which runs locally — there is no fetch, no upload, no logging. Open DevTools → Network while you generate a URI; you'll see zero requests. The page itself is statically generated, so even the page load doesn't carry any data about your file.
- Why does my SVG data URI break in CSS?
- Two common causes. First, you Base64-encoded the SVG when you should have URL-encoded it — most modern stacks accept both, but `background: url("data:image/svg+xml,…")` with URL-encoded payload is the common idiom and is harder to get wrong. Second, your SVG contains a literal `#` (used for fill colors like `#fff`) that wasn't escaped — `#` is the URI fragment delimiter and silently truncates the SVG payload. The URL-encoder in this tool escapes `#` correctly.
- Will a data URI work in an email signature or email template?
- Mostly yes for the major modern email clients (Gmail, Apple Mail, Outlook 2019+, Outlook for Mac and the web Outlooks). Older Outlook (2007–2016 on Windows) renders email through Word and may strip or fail to render Base64-embedded images — for those clients, host the image and link to it instead. For one-off images under 10 KB in modern client targets, data URIs work and avoid an external image host.