How to use
- Choose an image, drop it here or paste it with Ctrl+V.
- Pick the output — data URI, Base64 only, CSS background, HTML img tag or Markdown.
- Copy the result.
- To go the other way, paste a data URI or Base64 string under Base64 to image.
Options explained
- Data URI
- The full data:image/png;base64,… string, usable anywhere a URL is accepted.
- Base64 only
- Just the encoded data without the data:…; prefix, for APIs and JSON fields that expect raw Base64.
Examples
| Output | Result |
|---|---|
| Data URI | data:image/png;base64,iVBORw0KGgo… |
| CSS | background-image: url("data:image/png;base64,…"); |
| HTML | <img src="data:image/png;base64,…" alt=""> |
Frequently asked questions
How much bigger does Base64 make an image?
About a third. Base64 uses four characters for every three bytes, so a 30 KB image becomes about 40 KB of text.
When should I inline an image as Base64?
For small icons and images under a few kilobytes, inlining saves a network request. Larger images are better as separate files because they can be cached and do not bloat your HTML or CSS.
Which formats are supported?
Any image your browser can read, including PNG, JPEG, GIF, WebP, SVG, AVIF and ICO. Decoding recognises the format from the data itself when the MIME type is missing.
Are my images uploaded?
No. Encoding and decoding run in your browser.
Privacy
This tool runs entirely in your browser. Your files and text are processed on your device and are never uploaded to our servers.