Base64 / Data URI to Image
Decode a base64 string or data URI into a downloadable image.
Overview
The Base64 / Data URI to Image decoder takes a base64-encoded string — with or without a data: prefix — and converts it back into a downloadable image file. Paste a long string from an HTML src, an inlined CSS background, or an API response and the decoder verifies the payload, sniffs the format from its magic bytes, and renders a preview.
This is the go-to tool for developers who export base64 image strings from logs, debug Data URIs returned by upload endpoints, or need to convert an inline CSS sprite back into a PNG for further editing. It also rescues images embedded inside email source, JSON, and YAML configuration files.
How it works
A Data URI follows the pattern data:<mime>;base64,<payload>. The decoder strips any optional data: prefix, ignores whitespace and line breaks, and runs base64 decoding on the remaining payload. The result is a raw byte buffer that the tool then inspects: a PNG starts with 89 50 4E 47, JPEG with FF D8 FF, GIF with 47 49 46 38, and WebP carries a RIFF header followed by WEBP.
The detected magic number drives the file extension and Content-Type of the download so the saved file opens cleanly in any image viewer. If the byte stream does not match a known signature, the decoder still offers a .bin download so you can inspect or rename it manually.
Examples
Before: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
After: small.png (5x5 pixels, 95 bytes)
Before: /9j/4AAQSkZJRgABAQEASABIAAD/... (raw, no prefix)
After: decoded.jpg (1200x800 JPEG, 142 KB)
Before: data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...
After: icon.svg ready to drop into a Razor component.
FAQ
Does the input need a data: prefix?
No. The decoder accepts a bare base64 string as well as a full Data URI. Mime sniffing happens after decoding regardless.
Why does my paste fail to decode?
The most common cause is accidental URL encoding — %2B instead of + — or a stripped padding =. Decode URL-escapes first and ensure the length is a multiple of four.
Can it handle large strings?
Strings up to several megabytes decode in-browser without issue. Anything noticeably larger should be saved to disk first and processed locally.
What happens to malformed payloads?
If decoding succeeds but the bytes don't match an image signature, the file is offered as a generic binary download instead of being rejected.
Is the file uploaded anywhere?
Decoding happens in the request lifecycle on the server and the bytes are discarded after the response is sent — no copy is retained.