🖼️ Base64 to Image Converter: Decode Base64 and Data URIs

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 stored as a separate file. Decoding reverses that process: it reads the text back into the original bytes so a browser can display the picture again. Encoding and decoding are exact inverses, so a clean round trip always reproduces the original image pixel for pixel, with no quality loss.

Most Base64 images travel as a data URI, which looks like data:image/png;base64,iVBORw0KGgo and so on. The part before the comma is a header that names the MIME type (here image/png) and states that 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 with 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 from the MIME type list.

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, which makes this safe for internal database strings, screenshots from tickets, or proprietary design assets. The tool also reports the decoded byte size and the pixel dimensions once the image renders, so you can verify the file is what you expected.

The encoding follows the RFC 4648 standard alphabet. Every four Base64 characters map back to three original bytes, and one or two trailing = characters pad the final group when the source length is not an exact multiple of three. This is why Base64 text is always about one third larger than the binary it represents. A useful side effect is that the first few characters of a Base64 image often reveal its format at a glance: a string starting with iVBOR is a PNG, /9j/ is a JPEG, R0lGOD is a GIF, and PHN2Zy or PD94 usually signals SVG or XML.

Data URIs are popular because they cut a network request: a small icon, logo or sprite can live inline in a stylesheet or HTML page rather than as a separate download. The trade off is the one third size penalty and the fact that inline data is harder to cache than a standalone file. For tiny assets under a few kilobytes, inlining is often a net win; for larger images, a normal file with its own URL is usually faster. Decoding back to a real file, which this tool does, lets you switch from an inline data URI to a cacheable asset whenever that trade off no longer favours inlining.

If decoding fails, the cause is almost always the input rather than the image itself. Valid Base64 contains only the 64 alphabet characters plus optional = padding, and its length must be a multiple of four. Whitespace, line breaks copied from a code editor, a URL safe variant that uses - and _ instead of + and /, or a truncated copy will all break the decode. The tool strips common whitespace and tolerates a missing data: header, but a genuinely incomplete or corrupted string cannot be recovered and will report an invalid input error.

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, logo 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 that it renders correctly.
• Converting an inline data URI back into a real, cacheable image file when an asset has grown too large to keep embedded.
• Extracting an image stored as Base64 text inside a database column, config file or environment variable so you can view it.

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 from the list.
3. Press Render image to decode and preview it.
4. Check the detected type, decoded byte size and pixel dimensions shown below the preview.
5. Use the Download button to save the file with the correct extension, such as image.png or image.svg.

Formula & method

Worked examples

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

Quick format guess from the first characters of a Base64 string (no header needed)

How Base64 length relates to decoded image size

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, and then the payload). 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.
• Leaving in line breaks or spaces from a code editor. Copying from a wrapped JSON or HTML viewer often drags in newlines and spaces. These extra characters can break the decode, so paste the continuous string and let the tool strip whitespace, or clean it yourself first.
• Pasting URL safe Base64 by mistake. Some systems use a URL safe alphabet with - and _ instead of + and /. If a valid looking string still fails, swap those characters back before decoding, since the standard decoder expects + and /.

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.

Padding

One or two = characters at the end of a Base64 string that fill the final group when the data length is not a multiple of three.

atob

The browser function that decodes a Base64 string back into its original binary characters.

URL safe Base64

A Base64 variant that replaces + and / with - and _ so the text is safe to use inside URLs.

Frequently asked questions