What is the difference between a data URI and a raw Base64 string?

A data URI includes the MIME type prefix: data:image/png;base64, followed by the encoded data. A raw Base64 string is just the encoded data without any prefix. This tool accepts both formats.

What image formats are supported?

Any image format the browser can render: PNG, JPEG, GIF, WebP, AVIF, SVG, and BMP. For raw Base64 strings without a MIME prefix, the tool detects the format from the magic bytes (PNG, JPEG, GIF, WebP, BMP).

Is the decoded image identical to the original?

Yes. Base64 is a lossless encoding. The decoded bytes are identical to the original binary file.

Base64 to Image Converter — Decode and Preview Data URIs

You found a Base64 string in a JSON API response, a CSS file, or a database column and want to see what image it represents. Paste it here to get an instant preview and a download button — no server, no dependencies, no tracking.

What Does This Tool Do?

This tool accepts:

Full data URIs — data:image/png;base64,iVBOR… — the complete form used in HTML and CSS
Raw Base64 strings — just the encoded data without the data:…;base64, prefix

It decodes the string, renders the image, shows its dimensions and decoded size, and lets you download it as a PNG or the original format.

When You Need to Decode a Base64 Image

Debugging API responses: JSON payloads from image recognition, signature capture, or document scanning APIs often return images as Base64 strings. This tool lets you see the actual image in seconds.

Reading stored images: Some databases and config files store images as Base64 blobs. Pasting the value here lets you verify what image is actually stored.

Verifying CSS assets: Build tools sometimes inline small images as Base64 data URIs in CSS. If you want to see the source image, this tool decodes it instantly.

Testing image generation code: If your code generates a Base64-encoded image, this tool confirms the output is correct before you wire it into a UI.

Supported Input Formats

Format	Example
Full data URI	`data:image/png;base64,iVBOR…`
Raw Base64 (PNG assumed)	`iVBORw0KGgo…`
JPEG data URI	`data:image/jpeg;base64,/9j/…`
SVG data URI	`data:image/svg+xml;base64,PHN…`
WebP data URI	`data:image/webp;base64,UklGR…`

Decoding Base64 Images in Code

JavaScript

// In the browser — set as img src directly
document.querySelector('img').src = dataUri;

// Download the decoded image
const link = document.createElement('a');
link.href = dataUri;
link.download = 'image.png';
link.click();

Python

import base64

data_uri = 'data:image/png;base64,iVBOR…'
base64_str = data_uri.split(',')[1]
image_bytes = base64.b64decode(base64_str)

with open('output.png', 'wb') as f:
    f.write(image_bytes)

Node.js

const fs = require('fs');

const dataUri = 'data:image/png;base64,iVBOR…';
const base64 = dataUri.split(',')[1];
const buffer = Buffer.from(base64, 'base64');
fs.writeFileSync('output.png', buffer);

Frequently Asked Questions

What happens if I paste a raw Base64 string without the data URI prefix? The tool attempts to decode it and infer the image type from the first few bytes (magic bytes). PNG, JPEG, GIF, WebP, and BMP are detected automatically. If detection fails, the tool defaults to PNG.

Can I decode non-image Base64 strings? This tool is specifically for images. If you paste a Base64-encoded PDF, text file, or other binary, the preview will fail. For general Base64 decoding, use the Base64 Encoder/Decoder tool.

Is the decoding lossless? Yes. Base64 is a lossless encoding, so the decoded image is byte-for-bit identical to the original that was encoded.

Is my data sent to a server? No. All decoding happens in your browser using the native atob() API and <img> element. No data is transmitted.

Base64 to Image