Base64 to Image Converter and Preview
Decode a Base64 image value, inspect its preview, and download the result. Check that the encoded bytes contain a supported image.
Image preview will appear here
Paste a valid Base64 string to see the image
Base64 to Image Decoder: turn a data URI back into a file
Decode a Base64 image value, inspect its preview, and download the result. Check that the encoded bytes contain a supported image. The declared image type and the actual bytes need to agree. A readable Base64 string can still contain invalid or unsupported image data. Keep the original value while investigating decoding errors, and verify the downloaded image before using it.
How to use the Base64 to Image decoder
- Copy your full data URI, for example
data:image/png;base64,iVBORw0KGgo..., and Paste it into the input panel. - The preview renders the instant a valid string is detected — the footer shows the detected Format and an estimated KB size.
- If you only have raw Base64 with no prefix, it still auto-detects PNG and JPEG; for GIF, WebP, or SVG, prepend the
data:image/...;base64,header. - Click Download Image to save the file locally as
decoded-image.<ext>in its original format. - Use Clear (the trash icon) to reset the input and preview before pasting the next string.
What is a data URI, and how does decoding work?
A data URI embeds a file directly inside a URL instead of pointing to one on a server. The scheme is defined by RFC 2397, which gives the form data:[<mediatype>][;base64],<data>. The ;base64 marker tells the browser the payload is RFC 4648 Base64; the comma separates the header from the encoded bytes. Per the spec, when the media type is omitted it defaults to text/plain;charset=US-ASCII, so an image data URI must state its type explicitly — image/png, image/jpeg, and so on.
"If <mediatype> is omitted, it defaults to text/plain;charset=US-ASCII. As a shorthand, 'text/plain' can be omitted but the charset parameter supplied." — RFC 2397, "The 'data' URL scheme" (IETF, August 1998)
Decoding reverses Base64 back to raw bytes. Because Base64 maps every 3 binary bytes to 4 ASCII characters, the encoded text is roughly 33% larger than the file it represents (MDN data: URLs). This decoder strips whitespace, validates the data:image/…;base64, prefix, then hands the URI straight to an <img> tag for preview and to a download link for the file — all in your browser, no server round-trip.
Worked examples: string → result
Full PNG data URI
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
Renders instantly. Format reads PNG; download saves decoded-image.png.
Raw Base64, no prefix (PNG/JPEG only)
iVBORw0KGgoAAAANSUhEUg... or /9j/4AAQSkZJRgABAQ...
Auto-detected via the \x89PNG / \xFF\xD8\xFF signature, then wrapped in a data URI for you.
SVG data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...
The +xml suffix is dropped on download, so the file saves as decoded-image.svg.
Edge case · raw GIF/WebP/SVG fails to detect
Signature auto-detection only covers PNG and JPEG. Paste raw Base64 for a GIF, WebP, or SVG with no header and you get "Could not detect image type". The fix is to prepend the correct prefix, e.g. data:image/webp;base64,. A URL-encoded data URI (percent escapes instead of ;base64,) also fails — convert it first with the URL Encoder / Decoder.
Image media types and what this decoder does
Real behavior of this tool by format. "Raw auto-detect" means a prefix-less Base64 string is recognized from its file signature; everything else needs the full data URI.
| Format | Media type prefix | Raw auto-detect? | Saved as |
|---|---|---|---|
| PNG | data:image/png;base64, | Yes (\x89PNG) | decoded-image.png |
| JPEG | data:image/jpeg;base64, | Yes (\xFF\xD8\xFF) | decoded-image.jpeg |
| GIF | data:image/gif;base64, | No — prefix required | decoded-image.gif |
| WebP | data:image/webp;base64, | No — prefix required | decoded-image.webp |
| SVG | data:image/svg+xml;base64, | No — prefix required | decoded-image.svg |
The KB size shown is an estimate — here is the math
The footer size is computed as encodedLength × 0.75 / 1024, rounded to whole KB. That 0.75 is the inverse of Base64's expansion: 4 ASCII characters carry 3 bytes, so the decoded file is about three-quarters the length of the pasted text, or roughly 33% smaller. It is an approximation — it counts the whole string including the data:image/png;base64, header and ignores = padding, so for tiny images the real file can differ by a few bytes.
That 33% inflation is also why data URIs are a poor fit for large images: inlined bytes cannot be cached separately from the page and are re-parsed on every load. The sweet spot is small icons under ~2 KB, where saving one HTTP round-trip beats the size penalty. For anything bigger, decode here and serve it as a real file — then re-inline with the Image to Base64 encoder only when it genuinely helps.
Related encoder, crypto & data tools
Encode a file into a data URI
Base64 EncoderEncode any text to Base64
Base64 DecoderDecode Base64 text strings
URL EncoderPercent-encode unsafe characters
URL ParserBreak a URL into its parts
JWT DecoderRead Base64Url token claims
HMAC GeneratorSign data with a secret key
Hash GeneratorSHA-256 and MD5 digests
QR Code GeneratorMake a scannable SVG code
JSON FormatterInspect Base64 fields in API data
Guide: Base64 EncodingHow Base64 and data URIs work
All ToolsBrowse the full Toolk hub
Last updated: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Can I paste raw Base64 without the data: prefix?
For PNG and JPEG, yes — the decoder recognizes their file signatures (\x89PNG and \xFF\xD8\xFF) and wraps them in a data URI for you. GIF, WebP, and SVG have no signature detection, so they need the full data:image/...;base64, header to render.
Why does my pasted string refuse to render?
Usually a bad prefix: the decoder needs the literal ;base64, marker plus a data:image/ type. Percent-encoded (URL-encoded) data URIs fail too — decode the escapes first with the URL Encoder at /tools/url-encoder, then paste again.
How accurate is the KB size shown under the preview?
It is an estimate: encoded length × 0.75 ÷ 1024, rounded to whole KB. The figure includes the data URI header and ignores = padding, so for tiny images the real file can differ by a few bytes from the displayed size.
Do my images get uploaded when I decode them here?
No. Parsing, preview, and download are processed locally in your browser, and Toolk's page analytics do not receive the strings or images you paste — useful when the picture is a private screenshot or an unreleased company logo.
When should I inline an image as Base64 instead of serving a file?
Only for small icons under roughly 2 KB, where saving one HTTP round-trip beats Base64's ~33% size penalty and the loss of separate caching. For larger assets, download the decoded file here and serve it normally.