Skip to content

Base64 to Image

Convert Base64 data URLs back into downloadable images

Turn that wall of text back into a picture

You’re digging through an HTML email template and there it is, a massive Base64 string sitting inside an <img> tag’s src attribute. What does it look like? Good luck figuring that out by staring at iVBORw0KGgoAAAANSUhEUgAA.... Or maybe you pulled a Base64 blob from a JSON API response. Or found one buried in a CSS file as a background-image data URL.

Paste it in. See the image. Download it as a real file. That’s what this tool does.

Everything runs in your browser. The Base64 string you paste doesn’t go to any server, it gets decoded locally by the browser’s built-in APIs. Completely private, completely offline-capable.

Decoding

  1. Paste your Base64 string into the text area, full data URL or raw Base64, both work.
  2. Click “Render Image” to see what it looks like.
  3. Click “Download Image” to save it as a proper image file.

If you paste a complete data URL (like data:image/png;base64,iVBOR...), the tool detects the format automatically. Raw Base64 without the prefix? It defaults to PNG.

What it handles

  • Full data URLs: data:image/png;base64,... format
  • Raw Base64 strings: just the encoded data, no prefix
  • Auto format detection: reads the MIME type from the data URL prefix
  • PNG, JPEG, GIF, WebP, SVG: any image type your browser supports
  • Animated GIFs: animation survives the round trip
  • Client-side only: nothing leaves your device

When you need this

Debugging embedded images during development. You’re building an email template system and the images are stored as Base64. Something looks off. Instead of deploying and sending a test email just to see the image, paste the string here and preview it instantly. Saves you a deployment cycle.

Extracting images from API responses. Some APIs return image data as Base64 strings inside JSON. A profile photo endpoint, a captcha generator, a chart rendering service, they send back Base64, and you need the actual image file. Paste, preview, download.

Recovering images from database exports. You dumped a table where user avatars are stored as Base64 text. Now you need the actual image files. Paste each string in, download the image, done. Beats writing a script.

Inspecting what’s in your CSS. That background-image: url(data:image/svg+xml;base64,...) in your stylesheet, what icon is it actually rendering? Paste the data URL here and find out.

Verifying email template images before sending. Your marketing team’s email template has six Base64-embedded images. Before the campaign goes out, paste each one here to confirm they’re correct. Much faster than sending test emails to yourself.

To go the other way, encoding an image file as Base64, use the Image to Base64 tool on Toolsvu. If you need to edit the downloaded image afterward, the Image Compressor or Image Resizer can help.

Decoding questions

What formats does it handle?

Any image format your browser renders. With a data URL prefix, it detects PNG, JPEG, GIF, WebP, SVG, and more automatically. Without a prefix, it assumes PNG.

Can I paste raw Base64 without the data: prefix?

Yes. The tool accepts both complete data URLs and plain Base64 strings. Without the prefix, the decoded output is treated as PNG by default.

Does my data go to a server?

No. Decoding happens entirely in your browser using client-side JavaScript. The Base64 string never leaves your machine. This makes it safe to use with sensitive or proprietary images.

Why isn’t my image rendering?

Three common culprits: the Base64 string got truncated during copy-paste (check that you grabbed the whole thing), the data URL prefix has a typo (double-check the MIME type), or the string contains line breaks or spaces that broke the encoding. Clean it up and try again.

What about animated GIFs?

If the Base64 encodes an animated GIF, the decoded output retains the animation. Works exactly as expected.

base64 image decode data-url download

Related Tools

More in Image Tools