A data URI (data: URL) is a URI scheme that embeds the actual file contents directly inside the URL — useful for inlining small images into HTML, CSS, or JSON without an extra HTTP request. The format is data:[ ][;base64], . For images this is typically data:image/png;base64,iVBORw0KGgo... — the data: prefix, the MIME type, the optional ;base64 marker, a comma, and the encoded data. This decoder accepts both the full data URI form and the raw Base64 part alone.

Base64 to Image Decoder Online

Paste a Base64 string (with or without the data:image/...;base64, prefix) and preview the image, MIME type, dimensions, and file size — then download. 100% in your browser.

Base64 Input

Decoded Image Preview

image

Decoded image preview will appear here.

What is a Base64 to Image decoder?

A Base64 to image decoder reverses Base64 encoding to recover the original image bytes, then renders them as a previewable image. The two-step pipeline — Base64 decode, then attach the bytes to a data URI — is exactly what your browser does when it encounters a data:image/png;base64,... URL in HTML or CSS. Use this tool to inspect the contents of a Base64 image string copied from a JSON response, an HTML email, an inline SVG, or a configuration file.

The OpenFormatter Base64 to Image decoder accepts both the raw Base64 alphabet and the full data: URI form. If your string includes the data:image/png;base64, prefix the MIME is read directly; if not, it is auto-detected from the first few bytes (magic bytes — PNG starts with iVBORw, JPEG with /9j/, GIF with R0lG, WebP with UklGR, SVG with PHN2Zy, BMP with Qk0).

How to decode Base64 to an image — 4 steps

Paste the Base64 string. Drop a raw Base64 string or a full data:image/png;base64,... URI into the Input panel. Click Load Sample to try a tiny PNG.
Click Decode. The tool strips the data URI prefix if present, detects the MIME from magic bytes, normalises padding, and renders the image client-side.
Inspect the result. The preview panel shows the rendered image plus three info cards: MIME type, pixel dimensions, and file size in bytes / KB / MB.
Download the image. Click Download to save the file to your machine with the correct extension (.png, .jpg, .gif, .webp, .svg, .bmp).

Sample input and what the tool shows

Base64 Input (1×1 PNG)

iVBORw0KGgoAAAANSUhEUgAA
AAEAAAABCAYAAAAfFcSJAAAA
DUlEQVR42mP8/5+hHgAHggJ
/PchI7wAAAABJRU5ErkJggg==

Decoded Output

MIME:        image/png
Dimensions:  1 × 1 pixels
File size:   70 bytes

[image preview rendered]
[Download button enabled]

Auto MIME Detection

Recognises PNG, JPEG, GIF, WebP, SVG, and BMP from Base64 magic bytes — no need to specify the format manually.

Dimensions + Size

Reads naturalWidth × naturalHeight from the rendered image and computes original byte size from Base64 length.

Browser-Only

The Base64 string is converted to a data URI in your browser. No upload — screenshots, generated charts, and customer images stay on your device.

Common use cases

check_circleInspect a Base64 image embedded in a JSON response from an API
check_circleDecode a profile photo stored as Base64 in a Kubernetes Secret
check_circleView a Base64 chart or diagram returned by a code-generation LLM
check_circleInspect inline images in an HTML email source (data: URIs in <img src>)
check_circleDecode a captcha image or QR code returned as a Base64 string
check_circleRecover an image from a Base64 backup pasted into a chat or note
check_circleInspect a Base64-encoded favicon or logo from a CSS background-image rule
check_circleDecode a screenshot pasted from clipboard automation (e.g. n8n, Zapier flows)

Base64 to Image vs plain Base64 decode

A plain Base64 decoder gives you raw bytes — useful for text payloads (JSON, JWT claims, configuration blobs) but useless for binary content because raw image bytes do not display as text. This decoder fuses the two operations needed for images: it decodes the Base64, wraps the bytes in a data: URI with the correct MIME, and assigns it to an <img> element so the browser renders it. For pure text Base64 (Secrets, JWT payloads, encoded JSON), use the Base64 to JSON or generic Base64 decode tools instead.

Working with Base64?

Decode Base64 to JSON, XML, or YAML, or encode JSON back to Base64 — all browser-side.

Base64 to JSON JSON to Base64 Base64 to XML

Frequently Asked Questions

Is my image uploaded to your servers?

No. Decoding runs entirely in your browser using the native atob() function and a standard <img> element. The Base64 string is converted into a data: URI and assigned directly to the image source — no fetch, no XHR, no upload of any kind. Images containing screenshots of internal dashboards, customer photos, generated charts with private data, or proprietary diagrams stay on your device. Open DevTools → Network and click Decode to verify zero requests are made.

What image formats are supported?

PNG, JPEG (JPG), GIF (animated and static), WebP, SVG, and BMP are all supported because they are what every modern browser decodes natively. The auto-MIME detector recognises these from the Base64 magic-byte signatures: PNG starts with iVBORw, JPEG with /9j/, GIF with R0lG, WebP with UklGR, SVG with PHN2Zy or PD94bWw (XML declaration), BMP with Qk0. HEIC has limited browser support (Safari only) and may decode but not render in Chrome or Firefox; AVIF works in Chrome 85+, Firefox 93+, and Safari 16+.

What is a data URI?

A data URI (data: URL) is a URI scheme that embeds the actual file contents directly inside the URL — useful for inlining small images into HTML, CSS, or JSON without an extra HTTP request. The format is data:[<mediatype>][;base64],<data>. For images this is typically data:image/png;base64,iVBORw0KGgo... — the data: prefix, the MIME type, the optional ;base64 marker, a comma, and the encoded data. This decoder accepts both the full data URI form and the raw Base64 part alone.

Can I view EXIF metadata?

Not in this tool. The decoder shows the rendered image plus its dimensions (from the <img> element's naturalWidth and naturalHeight properties), MIME type (from auto-detection or the data URI prefix), and file size in bytes. EXIF data — camera make/model, exposure settings, GPS coordinates, capture timestamp — is embedded in JPEG and HEIC headers but requires a dedicated parser like exif-js or ExifReader. For privacy reasons, EXIF stripping is often the goal when re-encoding images, not viewing it.

Why does my Base64 not decode to a valid image?

Most common causes: (1) the Base64 string is truncated — copy-paste from a terminal or a JSON value can drop trailing characters or padding; (2) the string contains line breaks or whitespace that survived the copy — the decoder strips these but corrupted Base64 is unrecoverable; (3) the original was URL-safe Base64url with - and _ characters and your source mixed alphabets; (4) the file was not actually an image — for example a JSON service-account key encoded as Base64 will decode but never render. The error message distinguishes "not valid Base64" (decoding failed) from "not a recognizable image" (decoding worked, rendering did not).

How do I get a Base64 image from a file or URL?

Several ways: (1) command line — base64 image.png on macOS/Linux, certutil -encode image.png out.b64 on Windows; (2) browser DevTools — open an image, copy the data URI from the address bar; (3) Node.js — fs.readFileSync(path).toString("base64"); (4) JavaScript in a browser — read the file via FileReader.readAsDataURL() to get a ready-made data URI. To go the other direction (image to Base64), use the companion JSON to Base64 or the dedicated image-to-Base64 tool.

Why is the file size different from the original image?

The size shown is the decoded byte count — what the original image file weighs on disk. Base64 encoding adds 33% overhead (4 ASCII characters per 3 bytes), so the Base64 string itself is bigger than the file. The decoder calculates: bytes = (base64Length * 3 / 4) - padding. A 1 KB PNG becomes a ~1.33 KB Base64 string, but the decoded file is 1 KB.

What is the maximum size this tool can handle?

Browser memory and the data: URI size limit are the constraints. Most browsers comfortably handle data URIs up to a few megabytes. Chrome and Firefox accept data: URIs up to ~512 MB in theory, though performance degrades sharply past 5–10 MB. For large images (high-resolution photos, multi-megapixel screenshots), decoding works but rendering may be slow — a 50 MB Base64 string represents a ~37 MB image which will render eventually but take noticeable time. There is no server-imposed limit because no upload happens.