Base64 Input
Image Preview
Image will appear here
Paste a Base64 string or a full data URI and see the picture it encodes. Use it when you find image data inside an API response or a stylesheet and want to know what it is before writing code around it. PNG, JPEG, GIF, WEBP and SVG all render.
PNG, JPEG, GIF, WEBP
SVG (Scalable Vector Graphics)
data:image/png;base64,iVBORw0...Check the row before you trust it. Small images are often stored as Base64 text in a database column. Pasting the value here shows whether the row holds a logo or a corrupt blob.
Data URIs sit inside CSS and HTML. Copy the data: URI out of the url() value and paste it here to see one icon without loading the whole page.
const fs = require("node:fs");
const input = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
// Split off the "data:image/png;base64," prefix if present
const match = input.match(/^data:(image\/[a-z+.-]+);base64,(.+)$/i);
const mime = match ? match[1] : "image/png";
const base64 = match ? match[2] : input;
const ext = mime.split("/")[1].replace("+xml", "");
fs.writeFileSync(`decoded.${ext}`, Buffer.from(base64, "base64"));
console.log(`Wrote decoded.${ext}`);In the browser you do not need to decode at all: set the data URI as the src of an <img> or the href of an <a download>.
<?php
$input = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
// Drop the data URI prefix if there is one
if (preg_match('#^data:image/([a-z+.-]+);base64,#i', $input, $m)) {
$ext = str_replace('+xml', '', $m[1]);
$input = substr($input, strlen($m[0]));
} else {
$ext = 'png';
}
$bytes = base64_decode($input, true);
if ($bytes === false) {
die('Invalid Base64');
}
file_put_contents("decoded.$ext", $bytes);
echo "Wrote decoded.$ext (" . strlen($bytes) . " bytes)", PHP_EOL;When the Base64 comes from a form or an API, validate the decoded bytes with getimagesizefromstring() before saving, so users cannot upload arbitrary files.
import base64
import re
data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
m = re.match(r"^data:image/([a-z+.-]+);base64,(.+)$", data, re.I)
ext = m.group(1).replace("+xml", "") if m else "png"
payload = m.group(2) if m else data
with open(f"decoded.{ext}", "wb") as f:
f.write(base64.b64decode(payload, validate=True))
print(f"Wrote decoded.{ext}")Pillow can open the bytes directly with Image.open(io.BytesIO(base64.b64decode(payload))) if you need to resize or convert.
You can tell the format without decoding anything. Every image type starts with a fixed byte signature, and because Base64 maps 3 bytes to 4 characters, that signature always encodes the same way: PNG's 89 50 4E 47 becomes iVBORw0, JPEG's FF D8 FF becomes /9j/.
Store images as files, not as Base64 in a database column. A Base64 image takes a third more space, a CDN cannot serve it, and the browser cannot cache it as a separate resource. Decode the images to files in object storage and keep only the URL in the row.
This tool follows the specifications below. Read them when you need the exact normative wording, for example to settle an edge case between two implementations.
No. Paste either a full data URI or the raw Base64 string. The tool detects the image type from the data.
Yes. Once the preview appears, click Download Image to save the file in its original format.
The string is incomplete, contains stray characters, or is not an image at all. Check that the whole string was copied; a PNG, for example, starts with iVBORw0KGgo. If it is text, the Base64 decoder will show it.
Yes. SVG data URIs, whether Base64-encoded or URL-encoded, are rendered in the preview.
No. The browser decodes and renders the image in this tab, so nothing is uploaded.
Image to Base64 goes the other direction. If the string turns out not to be an image at all, the Base64 decoder shows what it contains.