Decode Base64 to Image Instantly
Base64 encoding is the standard method for representing binary data (like images) as plain ASCII text. Developers encounter Base64 strings when working with APIs, embedded assets, email attachments, and data URLs. This tool allows you to instantly visualize and download the decoded image—entirely within your browser.
What is Base64?
Base64 is a binary-to-text encoding scheme that converts any binary data into a set of 64 ASCII characters (A-Z, a-z, 0-9, +, /). It increases the data size by approximately 33% but makes it safe for transmission through text-only systems like JSON, XML, and email.
// Example encoding process
"Hello" → binary → 8-bit chunks
→ SGVsbG8=
Data URL Format
A data URL is a Base64 string prefixed with metadata that tells the browser how to interpret it. It follows the format:
// Anatomy of a Data URL
data:[MIME];base64,[DATA]
data:image/png;base64,iVBORw0KGgo...
Image Format Magic Signatures
Each image format starts with a unique sequence of bytes (a "magic number"). When you paste a raw Base64 string without a data URL prefix, this tool analyzes the starting characters to detect the format automatically.
| Format | MIME Type | Base64 Start | Hex Signature |
|---|---|---|---|
| PNG | image/png | iVBORw0KGgo | 89 50 4E 47 |
| JPEG | image/jpeg | /9j/ | FF D8 FF |
| WebP | image/webp | UklGR | 52 49 46 46 |
| GIF | image/gif | R0lGOD | 47 49 46 38 |
| SVG | image/svg+xml | PHN2ZyB | 3C 73 76 67 |
Debugging Data URLs
Paste a data URL from your CSS or HTML to instantly see the embedded image. Great for verifying that inlined assets are correct without writing scripts.
API Response Inspection
Many APIs return image data as Base64. Paste the raw string here to preview before integrating into your app. Works with JSON payloads from services like screenshot APIs or chart generators.
Email & Document Assets
Email clients often inline images as Base64 to prevent tracking. This tool helps you extract and save those embedded assets.
JavaScript Decoding
To decode a Base64 string programmatically in JavaScript and display it as an image:
// Create image from Base64
const img = new Image();
img.src = `data:image/png;base64,${b64String}`;
document.body.appendChild(img);
CSS Embedding
Small icons (under 10KB) can be embedded directly in CSS to save HTTP requests:
/* Inline SVG icon */
.icon {
background-image: url(
"data:image/svg+xml;base64,PHN2..."
);
}
Privacy & Security
This tool runs entirely client-side. Your Base64 data is decoded in your browser using JavaScript and is never sent to any server. This makes it safe for handling sensitive or private image data.
Frequently Asked Questions
What is the 33% size increase?
Base64 uses 6 bits per character to represent 8 bits of data. This means 3 bytes of binary become 4 characters of Base64, resulting in approximately 33% overhead.
Should I Base64 encode all my images?
No. Only small assets (icons, tiny logos under 5-10KB) benefit from inlining. Larger images should be served as separate files with proper caching.
Why does my pasted string not work?
Ensure it's a valid Base64 string. Whitespace, line breaks, or corrupted characters can break decoding. Some systems add newlines every 76 characters; remove these first.
Can I decode PDFs or other files?
This tool is optimized for common image formats (PNG, JPEG, WebP, GIF, SVG). Other binary formats require different handling.