Base64 to Image: Restoring a Picture From a Data URL

A vendor's API returns product images as base64 data URLs instead of URLs. When I first hit it, I pasted a 40,000-character string into a text decoder, got mojibake, and almost filed a bug against them. The data was fine — I just wasn't treating it as an image. That's the one mental flip that makes base64 images trivial.

Read the prefix, not the soup

Every base64 image string starts with a prefix that tells you everything:

data:image/png;base64,iVBORw0KGgo…

image/png is the MIME type — that's your file extension. The iVBOR at the start is the PNG header. If the string begins data:image/jpeg;base64,/9j/…, it's a JPEG. The prefix is the map; don't try to read the base64 itself.

You can also drop the data:image/png;base64, part entirely and decode just the tail — most tools handle both forms.

The browser trick that avoids all tools

If you're in a browser console, you don't need a converter at all:

const img = new Image();
img.src = "data:image/png;base64,iVBOR…";
document.body.appendChild(img); // it just renders

Modern browsers render data: URLs natively as the src of an <img>. But on the command line or in a code review, you still need to turn the string into a real file.

When you just want the file

For everything else, paste the string into our base64-to-image tool: it detects the MIME type from the prefix, renders a preview, and gives you a one-click download of the actual .png or .jpg. No terminal, no temp files, nothing uploaded — the decode runs entirely in your browser tab.

If the string doesn't have a data: prefix (some APIs hand you bare base64), the tool guesses PNG and you can still download it. If the download won't open in an image viewer, the MIME type was wrong — re-check the prefix.

For the exact syntax of data URLs, MDN's Data URLs page is the reference I keep bookmarked.

Written by Riley Chen — Full-Stack Developer. More about me →