Encode any file or text locally with the Multi-Format Encoder to build data URIs.
What a data URI is
A data URI embeds a file directly in a src or href attribute, for example data:image/png;base64,iVBORw0KGgo…. The browser decodes it locally, so no separate HTTP request is needed.
The format is defined by RFC 2397, and the Base64 variant is the most common way to inline binary files.
The full form has three parts: the scheme data:, an optional media type such as image/png, and the payload. With ;base64 the payload is Base64 text; without that marker, it is percent-encoded like a normal URL.
I first reached for a data URI when I had to send a colleague a single HTML file with a logo inside. It kept the demo self-contained and removed the usual follow-up question about missing image files.
Plain text does not need Base64 at all. A percent-encoded data URI such as data:text/plain,Hello%20World is smaller and readable, but binary files still rely on Base64.
When data URIs help
- Tiny icons and logos under roughly 2 KB that appear once per page
- Small fonts or sprites where an extra request costs more than the bytes
- Self-contained HTML for emails, demos, or offline files
- Cases where the asset must survive in a single file
- A favicon or small SVG icon that shows up only inside one page or component
- A one-off background image referenced once in a stylesheet
- Prototypes and demo pages where setting up a server route is not worth the effort
When data URIs hurt
- Large photos: they bloat the HTML and block parsing
- Repeated assets: each occurrence re-embeds the bytes and is not cached
- HTTP/2 pages: parallelism and caching make separate files cheap
- Anything over ~10 KB where a normal URL wins on every metric
- Assets behind a Content Security Policy that blocks data: sources — the image fails silently
- Anything you update often: every change forces a rebuild of the page that embeds it
- Email clients: several popular ones strip data: sources for security reasons, so inline images may not render
Warning: Base64 adds about 33 % overhead. A 100 KB photo becomes a 133 KB inline blob inside your HTML — visible to every visitor on every page load.
Side by side
| Scenario | Data URI | External file |
|---|---|---|
| Icon under 2 KB, used once | Good | OK |
| Large photo | Bad | Best |
| Asset used on many pages | Bad | Best (cache) |
| Self-contained email or demo | Best | Not usable |
| Email newsletter with images | Unreliable | Best |
| Frequently updated asset | Bad | Best (cache) |
Create a data URI locally
The encoder runs entirely in your browser. Your file never leaves the device, so you can inline files you would rather not upload anywhere. Build the URI with the Multi-Format Encoder and copy the result straight into your markup.
- Open the Multi-Format Encoder in your browser.
- Drop your image file and encode it as Base64.
- Prepend data:<mime-type>;base64, to the output.
- Paste the result into your src or href attribute.
- Check the output size. If the Base64 string is much larger than the original file, a normal URL usually wins.
FAQ
Q.Are data URIs cached by the browser?
A.No. Data URIs live inside the document, so they are re-downloaded with every page load. External files can be cached and shared across pages. If the same asset appears in ten places, the browser stores the data URI text ten times.
Q.What is the size overhead of Base64?
A.About 33 % plus padding. A 1 MB binary becomes roughly 1.33 MB of text. That is the price of representing binary data in a text-safe format: Base64 maps every three bytes to four characters.
Q.Are data URIs good for SEO?
A.Search engines can index them, but they add HTML weight and cannot be optimized or cached like real image files. Use them sparingly and keep images in separate files for production pages. For a test or an internal tool, the extra weight rarely matters.
Q.Can I use a data URI in CSS?
A.Yes, inside url() — for example background-image: url(data:image/svg+xml;base64,…). The same trade-offs apply, and long strings make the stylesheet harder to read, so keep them short.
Q.Do data URIs work in email?
A.Not reliably. Several popular clients block data: sources for security reasons, so an image that renders in your inbox may show as a broken link elsewhere. Host the image and link to it for anything important.
References
- RFC 2397 – The "data" URL scheme: https://www.rfc-editor.org/rfc/rfc2397
- RFC 4648 – The Base16, Base32, and Base64 Data Encodings: https://www.rfc-editor.org/rfc/rfc4648
- MDN – Data URLs: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
Inline the small, link the rest
For a one-off icon under 2 KB, a data URI is fine. For images that repeat or weigh kilobytes, a normal file wins because the browser caches it.
Build the URI locally with the Multi-Format Encoder and check the size before you paste it in.
A quick check before you commit: how big is the file, and how often does the page load it? Under about 2 KB and used once, inline. Above that, or repeated, link.