Back to Tools
b64

Base64 Decode Image

Decode Base64 strings back to images

Image Tools
Paste a Base64 string or data URI (data:image/...;base64,...). Images are processed in your browser - nothing is uploaded to any server.

Base64 String or Data URI

Paste your Base64 string or data URI here...

Explore More Tools

No tools match your search.

What Base64 Decode Image Does

A Base64 string is binary image data written as plain text. This tool reads that text, checks the header prefix to find the format, and rebuilds the original bytes into a viewable picture. Everything runs in your browser using the FileReader API, so nothing is sent to a server.

The decoder accepts both a raw Base64 string and a full data URI. A data URI starts with something like data:image/png;base64, , which names the MIME type. From that prefix the tool detects whether the source is a PNG, JPEG, GIF, WEBP, or SVG.

Why Turn Base64 Back Into a File

Base64 text appears in HTML source, CSS rules, JSON payloads, config files, and email markup. When you find one of these strings, you often need to see the actual image or save it as a file. Reading raw text tells you nothing about what the picture looks like.

Decoding the string solves several common problems:

  • You can preview an inline image pulled from a stylesheet or template.
  • You can extract an embedded picture from an API response and store it.
  • You can confirm the format and rough size before you reuse the asset.
  • You can spot a broken or truncated string when the preview fails to render.

How to Decode a Base64 Image

The input field accepts the full string or a data URI. When you press Decode, the tool splits off any prefix, converts the text back to binary, and draws the result. The metadata below the preview comes from reading the rebuilt image, not from the original text.

  1. Open Image Tools and select Base64 Decode Image.
  2. Paste your Base64 string or data URI into the input textarea.
  3. Click the Decode button, which stays disabled until the field has text.
  4. Review the preview along with the detected image type, dimensions, and approximate file size.
  5. Click Download to save the file, or Copy Image to place it on your clipboard.
  6. Click Decode New to clear the field and start over.

If your string has no prefix, the tool still reads the leading bytes to work out the format. A string that is incomplete or malformed will not produce a preview, which is a quick way to test whether the data is valid.

When to Use This Tool Versus Encoding

Decoding and encoding move in opposite directions. The Base64 Encode Image tool turns a picture file into a text string using readAsDataURL() . The decoder reverses that, taking text and reconstructing the bytes. Pick the tool that matches your starting point.

  • Start from a text string and want a picture: use the decoder on this page.
  • Start from an image file and want text for HTML or CSS: use the encoder instead.
  • Need to check that an encoded string round-trips correctly: encode a file, then decode the output here and compare.

Because both tools work on the page itself with no upload step, you can move between them without waiting on a network. Browse the rest of the DevSwitch tools if you also work with data formats like JSON or CSV.

FAQ

It is binary image data written using 64 text characters instead of raw bytes. This lets a picture travel inside text-only places like HTML, CSS, JSON, or email. The trade-off is size, since the text form runs roughly one third larger than the original file. Decoding reverses the process and gives you the picture back.

Both work. If you paste a data URI, the tool reads the prefix (for example data:image/jpeg;base64, ) to learn the MIME type, then strips it before converting. If you paste a bare string with no prefix, it inspects the leading bytes to detect the format. Either way you get a preview and the correct file extension on download.

It handles PNG, JPEG, GIF, WEBP, and SVG. The tool identifies the type from the header prefix in a data URI, or from the signature bytes at the start of a raw string. The detected format then appears next to the preview and sets the extension used when you save the file to disk.

No. The conversion runs entirely in your browser, so the string you paste and the picture you get back never leave your device. There is no server round trip during decoding. This matters when the image contains private or unpublished material, because the data stays local from paste to download.

The most common cause is a truncated string, where a copy-paste dropped the end. Stray whitespace, line breaks inside the data, or a broken prefix can also stop the rebuild. Because the browser tries to draw the actual bytes, an invalid string simply renders nothing. Recopy the complete value from the source and try again.

They run the same process in reverse. The encoder reads an image file and produces a text string plus a data URI. This decoder takes that text, converts the characters back to binary bytes, and rebuilds the picture for preview and download. Use the encoder to embed images in code and this page to recover them.

The size shown is calculated from the length of the decoded byte data, not read from a stored file record. Encoding padding and how the browser holds the data in memory can shift the number by a small margin. It is close enough to judge whether an asset is a few kilobytes or several megabytes, which is what most people need.

Yes. After the preview appears, the Copy Image button places the rebuilt picture on your clipboard, so you can paste it straight into a document, chat, or design tool. This uses the browser clipboard, which needs a modern browser and page permission. Download remains available if you prefer a file saved to disk.

This tool decodes SVG that has been Base64 encoded, usually inside a data URI such as data:image/svg+xml;base64, . It detects the SVG type from that header and rebuilds the file. If your SVG is raw XML markup rather than encoded text, it is already readable and does not need decoding at all.

There is no fixed cap set by the tool. The practical limit is your device memory and browser, since the decoding and preview both happen in the page. Very large strings, such as high resolution photos, use more memory and take longer to render. On a typical machine, images up to several megabytes decode without trouble.

CSS often stores images with url(data:image/png;base64,...) . Copy the part inside the parentheses, starting from data: , and paste it into the input. The tool reads the prefix, strips the wrapper, and rebuilds the picture. You can then Download it to inspect the asset your stylesheet loads inline.

No. Base64 is a text representation of the exact same bytes, so decoding gives you a pixel-for-pixel copy of the original file. There is no recompression or resizing step. A JPEG that was lossy before encoding stays exactly as lossy afterward, because the encoding only changed how the bytes were written, not the bytes themselves.