Image to Base64
Turn a local image into a data URI
A data URI carries a file inline instead of pointing at one. The syntax is data:, a MIME type, the marker base64, and then the encoded bytes — so an image becomes a string you can paste directly into a src attribute, a CSS background or an email template, with no separate file to host or request.
The trade is size against requests. Base64 inflates the data by about a third, and an inlined image cannot be cached separately from the document that contains it. That makes data URIs a good fit for small icons and one-off assets, and a poor one for photographs — where inlining bloats every page load with bytes the browser could otherwise have cached once.
How to use it
- Choose a filePNG, JPEG, SVG, GIF and WebP all work. The file is read locally with the FileReader API — it is never uploaded, which is the reason to use a tool that runs in the page rather than one that posts to a server.
- Copy the data URIThe output includes the data: prefix and the correct MIME type, so it can be pasted straight into markup or a stylesheet.
- Check the size before committingCompare the encoded length against the original. If the result runs to tens of kilobytes, a normal image request is almost certainly the better choice.
Frequently asked questions
When is inlining an image actually a good idea?
For small assets that would otherwise cost a request on the critical path — an icon, a tiny logo, a placeholder gradient. Under roughly a kilobyte or two the encoding overhead is smaller than the cost of a round trip. Above that, and especially for anything reused across pages, a cacheable file wins.
How much larger does the data URI get?
About 33% larger than the source file, plus the prefix. A 12 KB PNG becomes roughly 16 KB of text. Gzip or Brotli recovers some of that in transit, since Base64 text compresses reasonably, but the decoded size in memory and in your source file is the full amount.
Are data URIs bad for performance?
They can be, in two ways. They cannot be cached independently, so the bytes are re-sent whenever the containing file changes, and a large inlined asset delays parsing of the CSS or HTML it sits inside — which puts it directly on the critical rendering path. For a small icon neither matters much.
Do I need to Base64-encode an SVG?
Usually not. SVG is text, so it can be inlined with URL encoding instead, which avoids the 33% penalty and stays readable and diffable in source. Base64 is only necessary when the surrounding syntax makes percent-encoding awkward.
Do data URIs work in email?
Inconsistently. Several major clients, Outlook among them, block or strip them, which is why email images are conventionally hosted and linked with absolute URLs. Test in the clients that matter to you before relying on inlining.