How to use
- Drop an image or click to choose one. Screenshots can be pasted directly with Ctrl+V (or Cmd+V).
- Choose an output: a data URI, the raw Base64 string, a CSS background rule, an
<img>tag or Markdown. - Use Copy or save the result as a
.txtfile.
A sample SVG icon is loaded when the page opens so you can see what the output looks like. Images are encoded in your browser and never uploaded.
How Base64 and data URIs work
Base64 represents binary data with 64 characters — A–Z, a–z, 0–9, + and / (RFC 4648). It turns every 3 bytes into 4 characters, so the result is about 33% longer than the file. Prefix it with data:<type>;base64, and you get a data URI (RFC 2397) that HTML and CSS can use in place of a file URL.
| Output | Looks like | Where it goes |
|---|---|---|
| Data URI | data:image/png;base64,iVBOR… |
Any URL slot: src, url() |
| Base64 only | iVBOR… |
API request bodies, JSON fields |
| CSS background | background-image: url("data:…"); |
Stylesheets |
<img> tag |
<img src="data:…" width height alt> |
HTML pages, email signatures |
| Markdown |  |
READMEs, docs |
Examples
- A 30,000-byte (about 29 KB) PNG becomes 40,000 characters of Base64, a 33.3% increase.
- A 1,200-byte SVG icon is 1,600 characters in Base64, but URL-encoded it is usually shorter. SVG is already text (XML), so only a handful of symbols need escaping, such as
<→%3C.
Things to keep in mind
- Use it for small images. Icons, tiny logos and spinners of a few KB are a good fit. Because a data URI lives inside your HTML or CSS, the browser cannot cache the image separately, and it is downloaded again whenever that file changes.
- It does not make files smaller. Base64 is an encoding, not compression. Compress the image first if size matters.
- Some email clients do not display data URI images in signatures.
FAQ
Can I turn Base64 back into an image file?
Yes. Paste it into Base64 to Image to detect the format, preview it and save the file. For plain text rather than images, use the Base64 encoder/decoder.
For SVG, should I use Base64 or URL encoding?
URL encoding is usually shorter and stays readable. Choose Base64 if you need compatibility with very old tools or picky email environments.
Why does the data URI start with a type such as image/png?
The browser needs to know how to interpret the data. This tool uses the type reported for the file, falling back to the file extension.