HTML Base64 to Image Converter
Got a wall of Base64 gibberish and need the actual picture back? Paste it in, hit Decode, and grab your image. It is fast, free, and everything happens right here in your browser, so your data never leaves your machine.
data: prefix? Tell me the type:
What is Base64, in plain English?
Base64 is a way of writing binary data, like an image, using only plain text characters. It is handy because you can drop an image straight into your HTML, CSS, JSON or an email without linking to a separate file. The downside is that it looks like a never-ending string of nonsense to humans. This tool turns that nonsense back into a picture you can actually see and save.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
The part after base64, is the encoded image. If you only have that part, just pick the matching type above and the tool rebuilds the full string for you.
How to use it
- Paste your string. Drop in a full
data:imageData URI or just the raw Base64 chunk. - Pick a type if needed. Raw Base64 has no clue what it is, so choose PNG, JPEG, WebP, GIF or SVG from the dropdown.
- Hit Decode. Click the button or press Ctrl + Enter. Your image pops up with its dimensions and size.
- Download. Happy with it? Click Download image and it lands in your downloads folder.
When would you even need this?
Debugging code
You found a giant Base64 blob in some HTML, CSS or an API response and want to see what the image actually is.
Pulling assets out
An icon or logo is inlined as a Data URI and you need it back as a real file to reuse elsewhere.
Email and templates
Newsletters and templates love inlining images. Decode them to check they look right before sending.
Just curious
Someone handed you a mystery string. Paste it and find out if it is a cat, a logo, or a broken mess.
Good to know
- Whitespace is fine. Stray line breaks or spaces in the Base64 get cleaned up automatically.
- SVG works too. Pick the SVG type for vector images encoded as Base64.
- Nothing is uploaded. Decoding runs locally, so even huge strings stay private and fast.
- Need to go the other way? Use the Image to Data URI tool to encode an image into Base64.
Frequently asked questions
How do I convert Base64 back to an image?
Paste your Base64 string or full Data URI into the box and press Decode. You get a live preview plus a Download button to save the image. That is the whole dance.
Do I need the data:image prefix?
Nope. If your string already starts with data:image, you are set. If it is just raw Base64, pick the image type from the dropdown and the tool adds the correct prefix automatically.
It says the data is not valid. What now?
Usually the string got cut off when copying, or the wrong type was selected for raw Base64. Make sure you copied the whole thing, and try a different type. SVG and PNG are the most common.
Are my images uploaded anywhere?
Never. Everything runs in your browser, so your data stays on your device. The tool is free and keeps working even offline once the page has loaded.
Further reading: Wikipedia on Base64, the MDN FileReader API, and the MDN guide to Data URLs.
Need to turn an image into Base64 instead? That is literally the opposite tool, and it is right here.
Open the Image to Data URI tool→