📦 Data URI Generator
Convert text to data URI for inline embedding in HTML, CSS, and JavaScript
About this tool
A data URI embeds a resource directly inside a URL, so you can include small files — images, stylesheets, scripts, fonts — inline in HTML or CSS without a separate HTTP request. The format is data:[<MIME type>][;base64],<data>.
When to use it: inlining small SVGs or icons in HTML, embedding CSS/JS snippets in a single-file demo, putting CSV data in a download link, or creating self-contained HTML documents.
Example: the text Hello, world! with MIME text/plain and base64 encoding produces data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==. Paste that URI into a browser address bar and it renders as plain text.
FAQ
When should I use base64 vs percent-encoding? ›
Base64 is required for binary content (images, fonts). For text, percent-encoding produces a shorter and more readable URI — use it for HTML, CSS, JavaScript, and JSON. Both are equally valid for text types per RFC 2397.
Why does the data URI look so long? ›
The entire content lives inside the URI. Base64 encoding adds about 33% overhead over the raw bytes. For anything beyond a few kilobytes, external files served over HTTP are more efficient — the browser can cache them independently.
Can I embed images with this tool? ›
This tool works with text input. To convert binary images to data URIs, use the <a href="/tools/image-to-base64" class="text-accent hover:underline">Image to Base64</a> tool instead.
Are data URIs supported everywhere? ›
All modern browsers support data URIs. For HTML, you can use them in <code>href</code>, <code>src</code>, and <code>@import</code>. Some contexts restrict their use — <code>script-src</code> in CSP, for example, can block inline data URIs unless explicitly allowed.