Base64 Image Viewer
Convert a base64 data URI into a viewable, downloadable image, or turn an image file into a base64 data URI. Auto-detects PNG, JPEG, GIF, WebP and SVG.
Mode
Base64 data
How it works
- Base64 → Image: accepts a full
data:URI or raw base64. The MIME type comes from the URI prefix, or is sniffed from the magic bytes when missing (PNGiVBORw0KGgo=, JPEG/9j/, GIFR0lGOD, WebPUklGR, SVGPHN2Zw==). - Size is computed from the base64 length (
length × 3/4minus padding), so you get the decoded byte count without downloading anything. - The Download button rebuilds the original bytes into a Blob and saves it with the right file extension.
- Image → Base64: pick a local file and it is read with
FileReader.readAsDataURL— the result is shown as a text data URI ready to copy. - Everything runs locally; no image data is ever uploaded.
About Base64 Image Viewer
Base64-encoded images show up everywhere — email HTML, CSS backgrounds, API payloads, JSON fixtures — and while they are easy to generate, they are hard to inspect: you cannot tell the format, the real size, or whether the payload is even valid just by looking at the string. This viewer decodes the payload in memory, reports the detected type and byte size, renders the actual image, and lets you download the original file again.
The reverse direction is just as useful: when you need an image inline — a placeholder, a test fixture, or an attachment payload — pick the file and copy the generated data URI. The tool detects invalid base64, flags PDFs and other non-image payloads, and handles SVG as text so it works with the browser’s built-in encoding APIs without any external libraries.
What a data URI actually contains
A base64 data URI has the shape `data:[<mediatype>][;base64],<data>`. The parser requires the `;base64` token and takes the segment before the comma as the MIME type. Paste bare base64 with no prefix and the type has to be sniffed from magic bytes instead: PNG iVBORw0KGgo JPEG /9j/ GIF R0lGOD WebP UklGR SVG PHN2Zy PDF JVBERi
Sniffing is a convenience, not an authority. A declared type is trusted verbatim and never cross-checked against the bytes, so a mislabelled payload previews as whatever the browser decides to do with it. PDF is rejected explicitly and anything not starting with `image/` is refused. One branch is worth knowing: raw SVG markup pasted directly, starting with `<svg`, is encoded in the page via `TextEncoder` plus `btoa` rather than rejected. Input is validated against the standard alphabet, at most two padding characters and a length that is a multiple of four, so base64url variants using `-` and `_`, or unpadded output, are refused rather than silently mangled.
How the byte count is derived without decoding
The reported size is arithmetic, not measurement: `floor(length × 3 / 4)` minus two for `==` padding or one for `=` padding. That is correct for well-formed base64 and never touches the decoded bytes, which is why it is instant even for a multi-megabyte payload. Whitespace is stripped before both the length calculation and the alphabet check, so MIME-wrapped base64 with hard line breaks at 76 characters — still common in email and in `Content-Transfer-Encoding` output — measures correctly instead of being rejected.
Inline images earn their keep in a narrow set of cases: a favicon, a tiny placeholder, an icon embedded in a CSS `background-image`, or an HTML email that has to be self-contained because the client blocks remote images. Past a few kilobytes the arithmetic works against you. Every four characters of base64 carry three bytes of image, so a 40 KB PNG becomes roughly 54 KB of markup, and it is re-sent on every request instead of being fetched once and cached.
Compression, caching and CSP make inlining a last resort
Base64 cannot compress anything: it is a 6-bits-per-byte encoding that spends a third more space to avoid the transport problems of raw binary. PNG, JPEG and WebP arrive already deflated or DCT-compressed, so the encoder has nothing left to remove, and GIF is LZW-compressed and behaves the same way. SVG is the interesting case, being text, so it compresses well under gzip and a base64 SVG is often larger than the original file while still being unreadable as markup.
Two operational costs are easy to forget. A data URI has no independent cache entry — it cannot be revalidated with an ETag, and it is re-downloaded every time the containing document is. And a Content Security Policy without `data:` in `img-src` blocks it outright, which is a common reason an inlined image works in a prototype and disappears in production. The download button reconstructs the original bytes from the last previewed URI into a `Blob`, which is the fastest way to get the payload back out and into a real file.
Frequently Asked Questions
How do I convert an image to Base64?
What image formats are supported?
Is my data sent to a server?
Do I need an account or API key?
Can I use these tools offline?
All processing happens in your browser. No uploads, no tracking, no servers. Your API keys, configs, and private payloads stay private — 100% client-side.