🖼️ Base64 to Image Converter

What is the Base64 to Image?

Base64 is a way of writing binary data, such as an image file, using only 64 plain text characters (A to Z, a to z, 0 to 9, plus + and /). Because it is text, a Base64 image can be embedded directly inside HTML, CSS, JSON or an email instead of being a separate file. Decoding reverses that: it reads the text back into the original bytes so a browser can display the picture again.

Most Base64 images travel as a data URI, which looks like data:image/png;base64,iVBORw0KGgo… The part before the comma is a header that names the MIME type (here image/png) and says the payload is Base64 encoded. The part after the comma is the actual encoded image. This tool reads that header when it is present, so it knows the exact type without guessing. When you paste only the raw Base64 (no data: prefix), there is no header to read, so the type is inferred from the first few bytes, the magic number, or you can set it yourself.

Decoding happens entirely on your device using the browser's built-in atob function and a Blob, which is then loaded as an image to confirm it is genuinely decodable. Because nothing is sent over the network, even large or private images stay local. The decoded bytes are smaller than the Base64 text that produced them: Base64 inflates data by roughly one third, so a 12 KB data URI corresponds to about 9 KB of real image.

When to use it

• Recovering an image that a developer or designer pasted to you as a Base64 data URI in a chat, ticket or document.
• Inspecting a Base64 image embedded in HTML, CSS or JSON to see what it actually looks like before using it.
• Saving an icon or sprite that a website stores inline as a data URI rather than as a downloadable file.
• Debugging an API response or SVG that returns image data as a Base64 string and checking it renders correctly.

How to use the Base64 to Image

1. Paste the Base64 string or the full data:image/…;base64,… URI into the text box.
2. If you pasted only the raw Base64, leave the MIME type on Auto-detect or pick the correct format.
3. Press Render image to decode and preview it.
4. Check the detected type and dimensions, then use the Download button to save the file.

Formula & method

Worked examples

Common image MIME types and the magic bytes used to auto-detect them

Common mistakes to avoid

• Copying only part of the Base64 string. A truncated string decodes to corrupt bytes and will not render, or shows a broken image. Make sure you copy the entire payload, including the trailing = padding if it is there.
• Including the data: header inside the raw field but breaking it. If you paste a data URI, keep the whole thing intact (data:image/png;base64,…). Pasting the header without the ;base64 marker, or splitting it across lines incorrectly, stops it being recognised.
• Expecting the type to be guessed for raw Base64. Without a data: header the type can only be sniffed from the bytes. For unusual formats, set the MIME type manually instead of relying on Auto-detect.
• Confusing Base64 size with image size. The Base64 text is about one third larger than the real image. A long string does not mean a large picture, the decoded byte size shown after rendering is the true file size.

Glossary

Base64

A text encoding that represents binary data using 64 printable characters, letting images travel as plain text.

Data URI

A string of the form data:[MIME type];base64,[payload] that embeds a file inline instead of linking to it.

MIME type

A label like image/png or image/jpeg that tells software what kind of file the data is.

Magic number

The first few bytes of a file that identify its format, used here to auto-detect the image type.

Blob

A browser object holding raw binary data with a type, used to build a downloadable file from the decoded bytes.

Frequently asked questions