Image to Base64
Turn an image into a data URI, with the CSS and HTML ready to paste.
Encoding happens in your browser. The image is never uploaded, and neither is anything you paste in to decode.
A data URI puts an image inside the document that uses it, as text. Instead of a `src` pointing at a file the browser has to go and fetch, the bytes are written into the page itself, Base64-encoded. It is the answer to a narrow but real problem: a single-file HTML page, an email template, a stylesheet that must not depend on a second request.
More about Image to Base64
This tool encodes an image into all the forms you might need it in — the raw Base64, the full data URI, a CSS `background-image` rule, an `<img>` tag and a Markdown image — so you can copy the one that fits where it is going rather than assembling it by hand.
It is also honest about when not to do this. Base64 carries three bytes in four characters, so the encoded form is always about a third larger than the file, and a data URI cannot be cached on its own: it is re-downloaded with every page that references it, and a change to the image means the whole page changes. Above a few kilobytes a separate file is simply better, and this tool says so rather than letting you find out from a performance report.
The place it genuinely wins is small: an icon, a gradient, a 1-pixel spacer, a logo in an email that must render with images blocked. Under a couple of kilobytes, saving a whole round trip usually outweighs the extra third.
The reverse direction works too. Paste a data URI you found in a stylesheet or an export and the image is previewed and downloadable. Truncated pastes are common — editors wrap and clip long lines — so a clipped payload is reported as clipped rather than failing with a decoder error.
- Base64, data URI, CSS rule, HTML tag and Markdown, each ready to copy
- Shows the encoded size and the roughly one-third growth over the file
- Warns when the image is too large for inlining to be a good idea
- Decodes a pasted data URI, with a preview and a download
- Reports a truncated paste as truncated, not as a decoder failure
- Tolerates the line breaks an editor adds when it wraps a long URI
- Runs in your browser: the image is never uploaded
How to use it
- 1Drop in an image, or choose one from your device.
- 2Read the size comparison and the note about whether inlining is worth it.
- 3Copy the form you need: data URI, CSS, HTML or Markdown.
- 4To go the other way, switch to decode and paste a data URI.
Questions
When is inlining an image actually worth it?
When the image is small — an icon or a gradient of a kilobyte or two — and saving a request matters more than caching. Above that, a separate file wins because the browser can cache it independently of the page.
Why is the Base64 bigger than my image?
Base64 encodes three bytes as four characters, so it is always about 33% larger. That overhead is the price of putting binary data into a text document.
Does a data URI work in an email?
In most modern clients yes, and it is the usual way to make an image render when remote images are blocked. Gmail on the web is a notable exception for some content, so test before relying on it.
Why did my pasted data URI fail to decode?
Almost always because the copy was clipped: data URIs are single very long lines and editors truncate or wrap them. This tool tolerates wrapping and tells you specifically when the payload is incomplete.
Is a data URI a security risk?
A data URI holding an image is inert data, not code. The risk is with SVG data URIs, which can contain script, so this tool handles only raster formats.