Does the Base64 string need the data:image/... prefix?

No, a bare Base64 string works too, but without a declared MIME type the tool treats it as PNG data; include the full data URI header if the image is actually a JPEG, WebP or another format.

Is my image uploaded when I convert it to Base64?

No, the file is read into memory and encoded with the browser's built-in FileReader API, so the image and the resulting data URI text are generated on your device and never transmitted anywhere.

What can I do with the data URI this tool generates?

Paste it directly into an HTML `img src`, a CSS `background: url()` value, or a JSON field where an inline image is expected, since it's a complete, self-contained representation of the file.

Why does the preview show a size different from my original file?

The figure shown is estimated from the length of the Base64 text, which is roughly 33% larger than the original binary file, so it will read a bit higher than the file size on disk.

Base64 Image Viewer

Preview a Base64/data-URI image, or turn an image into a Base64 data URI, locally.

Local, Runs entirely in your browser, your data never leaves your device.

Loading tool…

Go from Base64 text to image, or image to text

Base64-encoded images show up inline in HTML `src` attributes, CSS `url()` values and JSON payloads, which makes them awkward to inspect just by reading the string. This tool works both directions: paste a data URI or a bare Base64 string to render it as an image with its dimensions and approximate file size, or pick an image file to get back the data URI ready to paste elsewhere. Decoding and encoding both happen with browser APIs, not a server upload.

How to use the Base64 Image Viewer

Switch between 'Base64 → Image' and 'Image → Base64' using the toggle at the top.
In decode mode, paste a data URI or raw Base64 string into the left panel to render it.
In encode mode, choose an image file and the tool generates its data URI automatically.
Copy the resulting data URI, or use the send-to menu to hand it straight to another tool.
Check the preview panel for the image's pixel dimensions and estimated size.

A full data URI like `data:image/png;base64,...` is parsed for its declared MIME type; a bare Base64 string with no header is accepted too, but is assumed to be a PNG since there's no type information to read.

The approximate size shown is calculated from the Base64 string length rather than decoding the bytes, since Base64 encoding inflates the original binary size by roughly a third, so the number you see will always read a little larger than the file on disk.

Frequently asked questions

Does the Base64 string need the data:image/... prefix?: No, a bare Base64 string works too, but without a declared MIME type the tool treats it as PNG data; include the full data URI header if the image is actually a JPEG, WebP or another format.
Is my image uploaded when I convert it to Base64?: No, the file is read into memory and encoded with the browser's built-in FileReader API, so the image and the resulting data URI text are generated on your device and never transmitted anywhere.
What can I do with the data URI this tool generates?: Paste it directly into an HTML `img src`, a CSS `background: url()` value, or a JSON field where an inline image is expected, since it's a complete, self-contained representation of the file.
Why does the preview show a size different from my original file?: The figure shown is estimated from the length of the Base64 text, which is roughly 33% larger than the original binary file, so it will read a bit higher than the file size on disk.