Base64 to Image Converter

Convert Base64 strings to images with instant live preview, download as PNG, JPG, or WebP, or copy the image directly to your clipboard. Converts both ways — Base64 to Image and Image to Base64.

Base64 String or Data URI

Sample Clear

0 characters Upload .txt with Base64

Image Preview

Download Copy Image

Paste a Base64 string on the left to render preview

Size: - Format: - Data Size: - Ratio: -

Copy Data URI Copy <img> Tag Copy CSS

Drag & Drop an image here, or click to browse

Supports PNG, JPG/JPEG, WebP, GIF, SVG, BMP, ICO (Max 25MB)

Uploaded Image Preview Upload Another

File: - Dim: - Original: - Base64: -

Generated Base64 Output

Copy Base64 Download .txt

Copy Raw Base64 Copy Data URI Copy <img> Tag Copy CSS

What is Base64 to Image Conversion?

Base64 is a standard binary-to-text encoding mechanism defined by RFC 4648. It takes binary data—such as image bytes representing PNG, JPEG, SVG, WebP, or GIF files—and translates it into a string of ASCII characters using a set of 64 characters (A-Z, a-z, 0-9, +, /, with = for padding).

Converting Base64 to Image decodes this text representation back into binary graphics that browsers, operating systems, and image viewers can display and save. By embedding images as Base64 Data URIs directly into HTML, CSS, JSON, or email messages, developers can eliminate external HTTP requests and bundle images inline.

The Structure of an Image Data URI

A standard Base64 image string is formatted as a Data URL:

• data: — The URI scheme identifier.
• image/png, image/jpeg, image/webp, image/svg+xml — The MIME type defining the format.
• ;base64, — Indicates that the payload data is Base64 encoded.
• <data> — The Base64 encoded binary bytes of the image file.

How to Convert Base64 to Image in Code

Need to decode Base64 into an image in your application? Here are ready-to-use code snippets across common programming languages:

1. JavaScript (Browser)

// Convert Base64 string to an HTMLImageElement
function base64ToImage(base64String) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = base64String.startsWith('data:') 
            ? base64String 
            : `data:image/png;base64,${base64String}`;
    });
}

// Convert Base64 string to a Blob for download or uploading
function base64ToBlob(base64String, mimeType = 'image/png') {
    const raw = base64String.replace(/^data:[^;]+;base64,/, '');
    const byteCharacters = atob(raw);
    const byteNumbers = new Uint8Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    return new Blob([byteNumbers], { type: mimeType });
}

2. Node.js

const fs = require('fs');

function saveBase64Image(base64String, outputPath) {
    // Strip data URI prefix if present
    const base64Data = base64String.replace(/^data:image\/\w+;base64,/, '');
    const buffer = Buffer.from(base64Data, 'base64');
    fs.writeFileSync(outputPath, buffer);
    console.log(`Saved image to ${outputPath}`);
}

3. Python 3

import base64
import re

def base64_to_image(b64_string, output_filename='output.png'):
    # Remove data:image/...;base64, header if present
    data = re.sub('^data:image/.+;base64,', '', b64_string)
    image_bytes = base64.b64decode(data)
    with open(output_filename, 'wb') as f:
        f.write(image_bytes)

# Usage
base64_to_image("iVBORw0KGgo...", "photo.png")

4. PHP

<?php
function base64ToImage($base64String, $outputFile) {
    $data = explode(',', $base64String);
    $binaryData = base64_decode(end($data));
    file_put_contents($outputFile, $binaryData);
}
?>

Common Use Cases

Frequently Asked Questions (FAQ)