When an Image Should Be a String
A data URI puts an image directly into the document that references it, as a base64 string prefixed with its MIME type. There is no second request, no separate file to deploy, and no chance of a broken link, at the cost of a payload about a third larger than the original file, embedded in a document that can no longer cache the image separately.
This tool converts an image to a data URI and converts one back, with a preview so you can confirm the string decodes to what you expect.
How to Encode or Decode an Image
Drop a file to encode, or paste a string to go the other way.
- Drag an image onto the drop area, or click to choose one. Any format the browser can read is accepted.
- Read the file size shown alongside the result, and compare it against the length of the encoded string.
- Copy the data URI, which already includes the `data:image/…;base64,` prefix ready to paste into CSS or HTML.
- To go the other way, switch to decoding and paste a base64 string.
- The decoder accepts a bare base64 string as well as a full data URI, assuming PNG when no prefix is present.
- Check the preview before using the result. A string that decodes to nothing visible is usually truncated.
When Embedding Helps and When It Hurts
Embedding removes a network round trip, which is why it pays for small assets: an icon, a placeholder, a background flourish. Under roughly a kilobyte or two, the request overhead you avoid generally exceeds the 33 per cent size penalty you take on.
Above that the arithmetic reverses, and a second problem appears. An embedded image cannot be cached independently of the document that contains it, so every visit re-downloads it and every change to the document invalidates it too. A 200 KB photograph in a stylesheet becomes 267 KB of CSS that no longer caches usefully. It also cannot be lazy-loaded, since it arrives as part of the document rather than as a separate resource.
Size After Encoding
What base64 does to a file, and whether embedding is usually worth it.
| Original file | As data URI | Typical verdict |
|---|---|---|
| 0.5 KB icon | ~0.7 KB | Embed, request overhead dominates |
| 2 KB logo | ~2.7 KB | Usually embed |
| 10 KB illustration | ~13.3 KB | Borderline; depends on reuse |
| 50 KB image | ~66.7 KB | Usually link |
| 200 KB photo | ~267 KB | Link, caching matters more |
| 1 MB photo | ~1.33 MB | Link, always |
SVG is the exception to the whole table. Because it is already text, an SVG can be embedded with URL encoding rather than base64 and avoid the 33 per cent penalty entirely, which is why inline SVG icons stay small.
Practical Notes
Data URIs are widely supported in CSS `url()`, HTML `src` attributes and JSON payloads, though some email clients block them and a few older tools cap the length they accept. Where an image is used in more than one document, a linked file is almost always better, since the browser fetches and caches it once instead of carrying a copy in each.
Everything here happens in your browser using the File API. The image is never uploaded, which also means the tool works offline once the page has loaded, and that a private image stays on your machine. Very large files will use memory proportional to their size, so a multi-megabyte photograph may be slow on a constrained device even though nothing leaves it.