Base64 to Image — Decode Base64 Data URLs to Image Files in Your Browser
Decode Base64 image data URLs back to PNG, JPG, WebP, or GIF files. Drag-drop or paste, runs entirely in your browser. No uploads, no limits.
Base64-encoded images show up in more places than they used to. The original use case was email attachments in the 1990s — MIME needed a way to embed binary in a 7-bit-clean text channel — but the modern use cases are different and more frequent: data URLs in CSS and HTML (a small icon inlined into a stylesheet), JSON payloads from APIs that ship images as text, content-addressable hashes in build pipelines, and screenshot tools that copy to clipboard as text so they paste into any application. The pattern is the same: a string starting with data:image/...;base64, followed by what looks like random characters, and a need to turn it back into a file you can open, edit, or upload.
The non-obvious thing about decoding is that the data URL prefix tells you exactly what the binary is. The image/png part means the decoded bytes are a valid PNG file (header bytes 89 50 4E 47), image/jpeg means JPEG (FF D8 FF), image/webp means WebP (RIFF...WEBP), and image/gif means GIF (GIF87a or GIF89a). The decoder here reads the MIME prefix, sets the output file extension accordingly, and validates the first few bytes of the decoded payload match the claimed format. If the MIME prefix is missing, the tool guesses from the binary signature and labels the output with the inferred extension.
For a final hand-off: if the decoded image is a logo or icon for a website, consider exporting it as SVG instead — vector logos scale to any size and are smaller than the equivalent Base64 PNG. If the source Base64 came from a CSS file, the file is already in the right place; consider keeping it inline rather than extracting it. If the decoded image is one of dozens and you want to convert the format (PNG to WebP, JPG to PNG), chain the decoder with one of the image conversion tools — save the decoded file, then upload it to the format converter.
How to use
Paste a data URL or Base64 string
Drop the full `data:image/png;base64,...` URL or the raw payload into the input. The tool auto-detects the image format from the MIME prefix or the binary signature if the prefix is missing.
Preview the decoded image
The decoded image appears in the preview pane with its format, dimensions, and decoded byte size. Large images render at a downscaled preview size to keep the UI responsive.
Download the file
The downloaded file keeps the original MIME type's extension — `.png` for PNG data URLs, `.jpg` for JPEG, `.webp` for WebP. The filename defaults to `decoded-<timestamp>.<ext>`.
Frequently asked
What does the data URL prefix look like?
A data URL has the shape `data:image/png;base64,iVBORw0KGgo...`. The first part names the MIME type, then `base64`, then a comma, then the payload. The tool strips the prefix automatically.
Can it handle very large Base64 images?
Yes, but the decoded image lives in memory before it is saved. A 10 MB Base64 string decodes to roughly 7.5 MB of pixels — well within browser limits on modern hardware. 100 MB+ payloads may stall the tab.
How do I get the Base64 string in the first place?
Use the Image-to-Base64 tool to encode a local file, or copy the value from a CSS rule, an HTML img src attribute, a JSON web token payload, or a developer tools network tab response body.
Will the output be pixel-identical to the source?
Yes — the conversion is byte-exact. Base64 is a reversible encoding. The decoded bytes are the exact bytes that were encoded, which decode to the exact pixels of the original image.
What if the Base64 is corrupted or truncated?
The tool validates the input length and the Base64 alphabet. If the string is truncated mid-character, the decoder stops at the last complete 4-character block and reports the truncation in the UI.
Limitations
- Memory-heavy for large imagesDecoding a 50 MB Base64 image uses roughly 200 MB of browser memory (decoded pixels plus the canvas). For very large payloads, save to a file directly rather than rendering a preview.
- Single image per decodeOne Base64 string produces one file. For batches, run the tool in a loop or use a small Node.js script with the Buffer API. The browser UI is optimized for one-off decodings, not bulk extraction.
- No animated GIF frame selectionAnimated GIFs decode to their first frame in the preview. The decoded file is still the full GIF with all frames preserved, but the UI shows only the first one for performance reasons.
Platform notes
- macOS
- The decoded PNG/JPG opens in Preview with a double-click. For automation, the CLI equivalent is `echo '<base64>' | base64 -d > out.png`. The browser tool avoids Terminal for one-off decodings.
- Windows
- PowerShell's `[System.Convert]::FromBase64String()` plus a file write is the CLI equivalent. The browser tool is the right pick for content copied from a CSS file, an HTML page, or a chat window.
- Linux
- Most Linux image viewers (Eye of GNOME, Gwenview, feh) open the decoded file. For command-line extraction from CSS, `grep -oP 'data:image/[^"]+' file.css | base64 -d > image.png` does the same job.
- iOS
- iOS Safari handles very long data URLs but truncates in the URL bar. Paste the Base64 from a notes app into the input. The downloaded image imports to Photos via the share sheet.
- Android
- Chrome on Android handles long inputs without truncation. The downloaded file saves to the Downloads folder and imports to Photos via the Gallery app's share intent.