Base64 Image Viewer

About Base64 Image Viewer

The Base64 Image Viewer decodes Base64-encoded image data and displays the resulting image. It accepts both raw Base64 strings and complete data URLs with MIME type prefixes.

Understanding Data URL Format

Base64 images use a data URL scheme to embed binary data as text:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
|     |     |       |
|     |     |       +-- Base64-encoded image data
|     |     +-- Encoding type (always base64 for images)
|     +-- MIME type (image/png, image/jpeg, image/gif, etc.)
+-- Data URL scheme prefix

Supported Image MIME Types

Base64 Decoding Process

Converting Base64 text back to binary image data:

1. Parse data URL: Extract MIME type and Base64 portion (remove data:image/type;base64, prefix)
2. Validate characters: Ensure only valid Base64 characters: A-Z, a-z, 0-9, +, /, =
3. Check padding: Verify length is multiple of 4 (add = if needed)
4. Decode to binary: Convert each 4-char group to 3 bytes
5. Create blob: Wrap binary data in Blob with correct MIME type
6. Display: Generate object URL and set as image src

JavaScript Base64 to Image:

// Full data URL
const dataUrl = "data:image/png;base64,iVBORw0KG...";

// Extract Base64 portion
const base64Data = dataUrl.split(',')[1];

// Convert to binary
const binaryString = atob(base64Data);

// Create byte array
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
  bytes[i] = binaryString.charCodeAt(i);
}

// Create blob and display
const blob = new Blob([bytes], { type: 'image/png' });
const imageUrl = URL.createObjectURL(blob);
document.getElementById('preview').src = imageUrl;

Common Use Cases

• Verify Base64 images: Preview encoded images to confirm they decoded correctly
• Debug data URLs: Check if Base64 strings from APIs or databases are valid
• Extract embedded images: Save images from HTML/CSS that use data URLs
• Test image encoding: Verify that image-to-Base64 conversion worked properly
• Inspect email templates: View inline images embedded in HTML emails
• Validate API responses: Check Base64 image data returned from web services

Base64 Size Overhead

Base64 encoding increases data size compared to binary:

• Ratio: 4 Base64 characters encode 3 bytes of binary data
• Overhead: Approximately 33.3% size increase
• Formula: encodedSize ≈ (originalSize / 3) × 4
• With data URL prefix: Additional ~20-30 characters for prefix

Binary Size vs Base64 Data URL Size:

Original Image     → Base64 String      → Data URL
100 bytes          → ~136 bytes         → ~155 bytes
1 KB               → ~1.36 KB           → ~1.38 KB
10 KB              → ~13.6 KB           → ~13.6 KB
100 KB             → ~136 KB            → ~136 KB
1 MB               → ~1.36 MB           → ~1.36 MB

Note: Overhead becomes negligible for larger images

Troubleshooting Base64 Images

If your Base64 image won't display, check these common issues:

• Missing prefix: Add data:image/png;base64, if using raw Base64
• Invalid characters: Remove any spaces, newlines, or non-Base64 characters
• Wrong MIME type: Ensure prefix matches actual image format (PNG vs JPEG)
• Truncated data: Verify the Base64 string is complete (check for cut-off ending)
• Padding errors: Length should be multiple of 4 (add = padding if needed)
• Browser limits: Very large Base64 strings may exceed browser memory limits

MIME Type Detection

When the MIME type is missing or incorrect, you can detect it from the Base64 header: