Overview
Turn text and files into data URIs
A data URI is a way to embed a file directly inside a URL. Instead of pointing to an external resource, the entire content is encoded into the link itself. The format looks like data:image/png;base64,iVBORw0KGgo..., where the MIME type tells the browser what kind of data follows and the Base64 payload carries the actual bytes.
ToolHub Data URI Encoder builds these for you from either plain text or any file. Text is encoded as UTF-8 so emoji and non-Latin scripts survive, and files are read with the browser FileReader API. Image files even get a live preview. Everything happens on your device.
Step-by-step
How to create a data URI
- 1
Pick text or file mode
Use Text mode to encode a string with a chosen MIME type, or File mode to encode a real file from your device. - 2
Provide your input
In Text mode, set the MIME type and type your content. In File mode, drop or pick a file and the data URI builds instantly. - 3
Copy the result
The full data URI appears in the output box. Click copy and paste it into your HTML, CSS, or JavaScript.
Background
How data URIs work
A data URI has three parts: the data: scheme, a MIME type and optional encoding flag, then the payload. With the ;base64 flag the payload is Base64, which can represent any binary content as safe text. Without it, the payload is treated as URL-encoded text.
Why UTF-8 matters for text
Base64 works on bytes, not characters. To encode text correctly you first convert it to UTF-8 bytes. This tool does that automatically, so accented letters, emoji, and scripts like Arabic or Chinese round trip without corruption.
The size trade-off
Base64 encoding makes data roughly 33 percent larger than the original. For a tiny icon this overhead is trivial and outweighed by saving a network request. For a large image or font, the bloat is real and a normal file link is usually the better choice.
Use cases
When to use a data URI
Inlining small icons in CSS
Embed a tiny SVG or PNG background directly in a stylesheet to remove an extra HTTP request.
Self-contained HTML emails
Some email workflows embed small images as data URIs so the message carries its own assets.
Quick prototypes and demos
Paste an image straight into a single HTML file with no separate asset folder to manage.
Embedding fonts
Inline a small icon font into CSS so it loads with the stylesheet instead of as a separate file.
JavaScript bundles
Bundlers often inline small assets as data URIs below a size threshold to cut requests.
Placeholder images
Use a tiny encoded blur or solid color as an instant placeholder while the real image loads.
Tips and best practices
- Keep data URIs for small assets. A few kilobytes is fine, but megabytes will bloat your files.
- Set the correct MIME type so the browser interprets the payload properly.
- Data URIs cannot be cached separately, so a shared image inlined on many pages is downloaded every time.
- For SVG, a URL-encoded data URI is often smaller than the Base64 version.
- Very long data URIs can hurt readability of your source. Inline only what truly benefits.
Common questions
What is the difference between a data URI and Base64?
Base64 is just the encoding of the bytes. A data URI wraps that Base64 (or URL-encoded text) together with a MIME type into a usable data: link the browser can load directly.
Why is my data URI so much longer than the file?
Base64 adds about 33 percent overhead, plus the scheme and MIME prefix. That is expected. The benefit is avoiding a separate request, which can be worth it for small assets.
Can I encode any file type?
Yes. File mode uses the FileReader API, which works on images, fonts, PDFs, and any other file. Only image files get a preview, but every type produces a valid data URI.
Is my data sent anywhere?
No. Both text and file encoding run entirely in your browser using built-in APIs. Nothing is uploaded, so even private files stay on your device.
100% private