BASE64 To Image - Complete Guide

Base64 to Image conversion decodes Base64-encoded image data back into viewable or downloadable image files. This is essential for processing images from APIs that return Base64, extracting embedded images from HTML/CSS, or saving canvas drawings as image files.

How It Works

The converter strips the data URI prefix if present, decodes the Base64 string to binary data, and either displays it directly, creates a downloadable blob, or saves as a file. The MIME type from the data URI determines the output format.

Technical Details

Data URI parsing: extract MIME type and Base64 data after the comma. atob() (browser) or base64.b64decode() (Python) converts to binary. Create Blob with correct type for downloads, or write binary to file for saving. Handle both raw Base64 and full data URI input.

Common Use Cases

1. API Response Processing: Convert Base64 images from API responses to displayable images.
   • Example: Profile pictures returned as Base64 in JSON
2. Canvas Export: Save canvas drawings as downloadable image files.
3. Data URI Extraction: Extract and save images embedded in HTML or CSS.
4. Email Processing: Save inline Base64 images from HTML emails.

Code Examples

Browser - Download Image

function downloadBase64Image(base64, filename) {
  // Remove data URI prefix if present
  const base64Data = base64.replace(/^data:image\/\w+;base64,/, '');

  // Decode Base64
  const binary = atob(base64Data);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }

  // Create blob and download
  const blob = new Blob([bytes], { type: 'image/png' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();

  URL.revokeObjectURL(url);
}

Creates downloadable file from Base64. Works in all modern browsers.

Python - Save to File

import base64
import re

def save_base64_image(base64_string, filepath):
    # Remove data URI prefix if present
    if base64_string.startswith('data:'):
        base64_string = re.sub(r'^data:image/\w+;base64,', '', base64_string)

    # Decode and save
    image_data = base64.b64decode(base64_string)
    with open(filepath, 'wb') as f:
        f.write(image_data)

# Usage
save_base64_image(api_response['avatar'], 'avatar.png')

# Detect format from data URI
def get_extension(data_uri):
    match = re.match(r'data:image/(\w+);', data_uri)
    return match.group(1) if match else 'png'

Simple binary write after Base64 decode. Extract format from data URI if needed.

Tips & Best Practices

• Always validate Base64 data before processing
• Handle both raw Base64 and data URI formats
• Use object URLs for temporary display, revoke when done
• Check MIME type from data URI or detect from file signature
• Consider memory with large images - process in chunks if needed

Common Mistakes to Avoid

• Not removing the data URI prefix before decoding
• Forgetting to revoke object URLs (memory leak)
• Using wrong MIME type causing display issues
• Not handling invalid/corrupted Base64 data

When to Use This Tool

Use Base64 to Image when processing API responses with embedded images, saving canvas content, extracting images from HTML/CSS data URIs, or converting stored Base64 data to viewable files.

Frequently Asked Questions

How do I display Base64 image data?

Use as src directly: . In CSS: background-image: url(data:...). Or decode to Blob and create object URL for dynamic use.

How do I download a Base64 image?

Decode to binary, create a Blob with correct MIME type, create object URL, trigger download via . See code examples below.

What if the MIME type is missing?

Try to detect from the image signature (magic bytes): PNG starts with 0x89504E47, JPEG with 0xFFD8FF, GIF with 0x474946. Or default to image/png and let the browser figure it out.

Can I convert to a different image format?

Decode to image, draw to canvas, then export in desired format using canvas.toDataURL("image/jpeg", 0.9). This allows format conversion and quality adjustment.

Get Started

Ready to try BASE64 To Image? Use the tool now - it's free, fast, and works right in your browser.

---

Last updated: June 27, 2026