Base64 to Image: decode data URIs back to PNG, JPG, GIF, SVG & WebP
Paste a raw Base64 string, a full data: URI, a CSS background-image rule or an HTML <img> tag — preview the decoded image and download it as the original file. Runs entirely in your browser.
Paste a Base64 string on the left to start.
Data URI in, image out
Drop in a complete data: URI or just the Base64 payload — the tool detects the MIME type from the header or by sniffing the decoded bytes.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGP4z8DwHwAFAAH/q842iQAAAABJRU5ErkJggg==
→ 1×1 PNG (67 bytes), MIME detected as image/png, downloadable as decoded.png
What you'll use this for
Reversing a data URI back to an image file is handy whenever you have the encoded form but need the original asset on disk.
Inspect an inlined asset
Extract an icon embedded in CSS or HTML to view or edit it as a normal file.
Debug an API response
An endpoint returned a Base64 image field — preview it instantly without writing throwaway code.
Save an email image
Pull an inlined logo or screenshot out of a raw email source as a real PNG or JPG.
Reverse-engineer a build
Bundlers inline small assets as data URIs — recover the originals from a minified CSS file.
How to decode a Base64 image
Paste your input
Raw Base64, a data: URI, a CSS url(...), or an <img src="..."> tag — the tool extracts the payload for you.
Click Decode
The Base64 is decoded with atob(), wrapped in a Blob, and rendered into the preview pane. The MIME type is sniffed from magic bytes if the input didn't include one.
Preview & download
Inspect the image on a checkerboard background, then download with the detected extension or convert to PNG / JPEG / WebP.
Reuse anywhere
The saved file behaves like any other image — drop it into a design tool, attach it to an email, or commit it to a repo.
Frequently asked questions
A raw Base64 string, a full data: URI (e.g. data:image/png;base64,...), a CSS background-image: url('...') rule, or an HTML <img src="..."> tag. The tool extracts the Base64 payload automatically.
If the input is a data: URI, the MIME type is read from the header. For a raw Base64 string the first few decoded bytes are inspected against PNG, JPG, GIF, WebP and BMP magic numbers. SVG is detected when the decoded text starts with <svg or <?xml.
No. Decoding happens entirely in your browser with atob() and a Blob — your data never leaves the page.
The default "Strip whitespace & URL chars" option removes spaces, line breaks, and converts URL-safe variants (-_) back to standard (+/). Missing padding (=) is also re-added.
If you pick PNG / JPEG / WebP in the Download format menu, the decoded image is re-encoded via a canvas. Leave it on Auto to download the original bytes with the detected extension.
Yes. No signup, no limits, no ads. Runs entirely in your browser.
About Base64 image decoding
Decoding a Base64 image is the exact inverse of encoding it. The Base64 payload is the original bytes (PNG, JPG, GIF, SVG, WebP…) re-expressed as printable ASCII characters from the 64-character alphabet defined in RFC 4648. Every four characters of Base64 represent three bytes of original data, with = padding when the source length isn't a multiple of three.
data: URIs vs raw Base64
A data: URI is just a Base64 payload prefixed with data:<mime>;base64,. The header tells the browser how to interpret the bytes, so reading the MIME type is trivial. With a raw Base64 string you only have the bytes themselves, so the tool falls back to inspecting the first few bytes against well-known image signatures (the same magic-number sniffing browsers and file(1) use).
Common signatures
- PNG — starts with
89 50 4E 47 0D 0A 1A 0A(iVBORw0KGgoin Base64). - JPEG — starts with
FF D8 FF(/9j/in Base64). - GIF — starts with
GIF87aorGIF89a(R0lGODin Base64). - WebP — RIFF container with
WEBPat offset 8 (UklGRin Base64). - SVG — decoded text starts with
<svgor<?xml.
Re-encoding caveats
Choosing PNG / JPEG / WebP under Download format re-encodes the image through an HTML5 canvas. That throws away any embedded metadata (EXIF, ICC profiles), and re-encoding to JPEG is lossy. Stick with Auto when you want the exact original file.