Encoded locally in your browser — your image is never uploaded.
data URIs add ~33% overhead — consider serving the file directly.
- Detected MIME type and size show up here.
About this tool
Base64 is a binary-to-text encoding that maps every three bytes of binary data onto four ASCII characters drawn from a 64-symbol alphabet, padding the tail with "=". A data URI wraps that payload with a "data:<mime>;base64," prefix so an image can live inline inside HTML, CSS, or JSON instead of as a separate network request. Encoding inflates size by roughly 33%, since four output characters represent three input bytes.
Use it to inline small icons, sprites, or SVGs directly into a stylesheet or markup to cut HTTP round-trips, embed logos in emails and self-contained HTML reports, paste image bytes into a JSON API payload, or drop a quick favicon into a single-file prototype. The reverse mode turns a data URI or raw Base64 string back into a downloadable file when you need to recover an image pulled from CSS, a database column, or a log.
Everything runs in your browser — your image is read with FileReader and never uploaded, so even confidential assets stay on your machine.
Frequently asked questions
Why is my Base64 image larger than the original file?
Base64 encodes three bytes of binary into four ASCII characters, so the encoded text is about 33% bigger than the source file. The data URI prefix and any line wrapping add a little more on top.
Should I inline images as Base64 data URIs or link to the file?
Inline small, frequently reused assets like icons and SVGs to save HTTP requests, but serve larger images as separate files — data URIs can't be cached independently, bloat your HTML or CSS, and the ~33% size overhead outweighs the saved request.
How do I convert a Base64 string back into an image file?
Switch to Base64 to Image mode and paste either a full data:image/... URI or a raw Base64 string; the tool decodes it, previews the result, detects the MIME type, and offers a Download button that saves it as a real file.