Base64 Image Preview & Decoder
Preview a base64-encoded image and decode it back into a clean data URI. Paste raw base64 or a full data:image/...;base64,... string — see the rendered image plus its detected format, MIME type and decoded file size.
Input
Whitespace and line breaks in a pasted string are ignored automatically.
Only used when the input is raw base64 without a data:image/...;base64, prefix, and the real format can't be auto-detected from the file's signature.
Output
Paste a base64-encoded image to see the preview here.
The cleaned-up, ready-to-use data URI — paste it into an <img src> or a CSS url().
| Property | Value |
|---|---|
| No data yet | |
Guides
What this tool does
Paste a base64-encoded image and see it rendered instantly — no guessing whether the string is valid, no need to build your own <img> tag just to check. It accepts raw base64 (just the encoded bytes) or a full data:image/...;base64,... URI, cleans up whatever whitespace or line wrapping got added when it was copied, and shows you the decoded image alongside its format, MIME type and file size.
How to use it
- Paste the base64 string into the input. Line breaks and spaces are stripped automatically, so a value copied from an email, a log line or a multi-line text file still works.
- If the string doesn't already start with
data:, pick the image type — PNG, JPEG, GIF, WebP or SVG. This is only a fallback: if the actual file signature can be recognized, the tool trusts the bytes over your selection. - The preview, decoded info table and a normalized data URI appear immediately — there's no button to press.
- Use the preview's Download action to save the decoded file, or copy the normalized data URI to paste straight into an
<img src>or a CSSurl().
Why the preview sometimes shows a different format than you picked
The tool reads the first few bytes of the decoded data (the file's "magic number") to identify PNG, JPEG, GIF, WebP and SVG content. If it recognizes a signature, that wins over the image-type dropdown or a mismatched data: MIME prefix — so a .png-named string that's actually a JPEG still renders and downloads correctly. The dropdown only matters when the bytes don't match any known signature.
Why there are no pixel dimensions
Reading an image's width and height requires the browser to actually decode and lay out the image (an Image/<canvas> element), which happens after this tool has already done its job of validating and previewing the string. What you get here — format, MIME type, decoded byte size and base64 length — is everything derivable straight from the encoded string itself.
Is my data private?
Yes. Decoding happens entirely in your browser — the base64 string, and the image it represents, are never uploaded or logged anywhere.
Common uses
- Sanity-checking a base64 image before pasting it into HTML, CSS or an API payload.
- Recovering a viewable, downloadable file from a base64 blob found in a log, database dump, or JSON response.
- Confirming that a
data:URI you copied is well-formed and points to the format you expect.