Base64 to Image

What the Base64 to image tool does

You have a long Base64 string that is really a picture, and you want to see it and save it as an actual image file. This tool does that. Paste the Base64 in, choose what kind of image it is, and press Convert. The picture appears in a preview, and you can download it as a file or grab a ready HTML or CSS snippet that displays it.

It is the reverse of the Image to Base64 tool. That one packs an image into text, this one unpacks the text back into an image.

How to use it

1. Paste your Base64. Drop the string into the box. A full data URI that starts with data:image/ works too, and so does a plain Base64 string on its own.
2. Choose the image type. Pick PNG, JPG, GIF, or WebP to match what the image actually is. More on why this matters just below.
3. Press Convert. The preview shows the image, and you get a Download button plus ready HTML and CSS.

Clear empties everything for the next one.

Why you have to pick the image type

This is the one part worth understanding, and it explains that little dropdown. A raw Base64 string is just the image's bytes written as text. It does not carry a label saying "I am a PNG" or "I am a JPG." That information normally lives in the data:image/png part at the very front of a data URI, not in the Base64 itself.

So when you paste a bare Base64 string, the tool genuinely does not know what kind of image it is, and it needs you to say. That is what the dropdown is for: you tell it the format, and it labels the image correctly so your browser displays it and the download gets the right file extension. If you happen to paste a complete data URI that already names the type, the tool reads that and uses it. The short version: bare Base64 means you pick the type, a full data URI means it is already decided.

What it gives you back

Once it converts, you get the image four ways:

• A preview so you can confirm it is the right picture before doing anything else.
• A downloadable file, saved with the extension matching the type you chose.
• An HTML image tag with the image embedded, ready to paste into a page.
• A CSS background line with the same, ready for a stylesheet.

How it works

The tool takes your Base64 and wraps it into a data URI, the data:image/[type];base64, form, using the type you selected. Then it points an image element at that URI, and the browser decodes the Base64 and draws the picture. The download simply hands you that same data straight back as a file. If you pasted a full data URI to begin with, it uses it as is. There is no library doing anything clever here, just the browser turning the encoded bytes back into a picture.

Where these Base64 strings come from

You usually meet an image-as-Base64 because a system somewhere preferred text to a file. An API or a database might store and hand back an image as a Base64 string rather than a separate file. You might find a data: URI sitting in someone's CSS or HTML and want the original picture out of it. A JSON payload might carry an image in one of its fields. Or a drawing made on an HTML canvas might come out as a Base64 string that you now want as a real file. In all of these, this tool is how you get from the text back to something you can open and save.

Questions people ask

How do I turn a Base64 string into an image?

Paste the Base64, choose the image type to match what it is, and press Convert. The image appears in the preview, and you can download it as a file or copy the HTML or CSS version.

Which type should I choose?

The one the image actually is. If you know the Base64 came from a PNG, pick PNG, and so on. If you pasted a full data URI that already starts with something like data:image/jpeg, the type is already set and your choice is ignored.

What happens if I pick the wrong type?

The preview may still display, since browsers can often recognise an image by its contents, but the downloaded file will carry the wrong extension. To be safe, match the type to the real format, or paste a full data URI that names it.

Do I need the data:image part, or just the Base64?

Either works. Paste the bare Base64 and choose the type, or paste the whole data URI including the data:image/... prefix and let the tool read the type from it.

References

1. Masinter, L. (1998). RFC 2397: The "data" URL scheme. Internet Engineering Task Force (IETF). https://www.rfc-editor.org/rfc/rfc2397
2. Josefsson, S. (2006). RFC 4648: The Base16, Base32, and Base64 Data Encodings. Internet Engineering Task Force (IETF). https://www.rfc-editor.org/rfc/rfc4648
3. MDN Web Docs, Base64 (glossary entry and encoding overview). https://developer.mozilla.org/en-US/docs/Glossary/Base64