Base64 Image Decoder

What Is Base64 Image Decoding?

Base64 image decoding is the reverse of Base64 image encoding: it takes a Base64 string or data URI that represents an image and converts it back into viewable binary pixel data. When you receive a string like data:image/png;base64,iVBORw0KGgo..., decoding strips the data URI prefix, reverses the Base64 encoding defined in RFC 4648, and reconstructs the original image bytes. The browser can then render the decoded bytes as a visible image.

Data URIs (RFC 2397) bundle the MIME type and Base64-encoded content into a single string. They appear frequently in API responses, HTML email source code, CSS stylesheets, and database records where images are stored as text rather than binary files. Decoding these strings is necessary to preview the image, verify its content, or save it as a standalone file. Because Base64 uses 4 ASCII characters to represent every 3 bytes of binary data, the encoded string is always approximately 33% larger than the original image.

This tool parses both full data URIs (data:image/png;base64,...) and raw Base64 strings without the data: prefix. For raw strings, the image format is detected automatically by inspecting the first few Base64 characters, which correspond to the file's magic bytes — for example, iVBORw0KGgo always indicates a PNG file. The decoded image is rendered directly in the browser and can be downloaded as a file.

A common developer scenario is working with a REST API that returns a profile photo or document thumbnail as a Base64 string inside a JSON field — for example, {"avatar": "data:image/png;base64,iVBORw0KGgo..."}. To use the image, you extract the field value, strip the data URI prefix up to and including the comma, then feed the remaining Base64 characters through a decoder such as atob() in JavaScript or base64.b64decode() in Python to recover the raw bytes. Pasting the full value into this tool skips all of those manual steps and renders the image immediately.

Why Use This Base64 Image Decoder?

This tool converts Base64 image data back to a viewable, downloadable image entirely in your browser — no upload, no server processing, no account required.

Base64 Image Decoding Use Cases

Data URI Structure for Images

A data URI packages the image type and encoded content into a single string. Each component is essential for correct decoding: the scheme (data:) signals that the URL is self-contained rather than a reference to an external resource; the MIME type (e.g., image/png) tells the renderer which format to use when interpreting the raw bytes; the ;base64, marker distinguishes Base64-encoded content from data URIs that use percent-encoding for plain text formats. The Base64 payload itself may end with one or two = padding characters — these are required when the input byte count is not a multiple of three, ensuring the encoded length is always a multiple of four. Omitting or truncating any of these components causes decoding to fail or produce a corrupt image.

Detecting Image Format from Base64

When a Base64 string lacks a data: prefix, the image format can be identified by inspecting the first few characters. These characters correspond to the file's magic bytes — fixed byte sequences at the start of every image file that identify the format:

Code Examples

How to decode Base64 image strings back to image files in popular languages and environments:

// Decode a Base64 data URI to a Blob and create a download link
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'

// Method 1: fetch API (simplest)
const res  = await fetch(dataUri)
const blob = await res.blob()
// blob.type → "image/png", blob.size → 2048

// Method 2: manual decode for older environments
const [header, b64] = dataUri.split(',')
const mime    = header.match(/:(.*?);/)[1]   // → "image/png"
const binary  = atob(b64)
const bytes   = Uint8Array.from(binary, c => c.charCodeAt(0))
const blob2   = new Blob([bytes], { type: mime })

// Create a download link
const url = URL.createObjectURL(blob)
const a   = document.createElement('a')
a.href = url
a.download = 'decoded.png'
a.click()
URL.revokeObjectURL(url)

import base64
import re

data_uri = 'data:image/png;base64,iVBORw0KGgo...'

# Parse the data URI
match = re.match(r'data:(image/[\w+.-]+);base64,(.+)', data_uri)
mime_type = match.group(1)    # → "image/png"
b64_data  = match.group(2)

# Decode and write to file
image_bytes = base64.b64decode(b64_data)
ext = mime_type.split('/')[1].replace('jpeg', 'jpg').replace('svg+xml', 'svg')

with open(f'output.{ext}', 'wb') as f:
    f.write(image_bytes)
# → writes output.png (byte-for-byte identical to the original)

# Decode raw Base64 (no data: prefix)
raw_b64 = 'iVBORw0KGgo...'
image_bytes = base64.b64decode(raw_b64)

import { writeFileSync } from 'fs'

const dataUri = 'data:image/png;base64,iVBORw0KGgo...'

// Extract MIME type and Base64 payload
const [meta, b64] = dataUri.split(',')
const mime = meta.match(/:(.*?);/)[1]  // → "image/png"

// Decode to Buffer and save
const buffer = Buffer.from(b64, 'base64')
writeFileSync('output.png', buffer)
// → output.png (identical to the original file)

// Validate by checking magic bytes
console.log(buffer.subarray(0, 4))
// PNG → <Buffer 89 50 4e 47>  (\x89PNG)
// JPEG → <Buffer ff d8 ff e0>

# Decode a raw Base64 string to an image file (Linux)
echo 'iVBORw0KGgo...' | base64 -d > output.png

# Decode a raw Base64 string to an image file (macOS)
echo 'iVBORw0KGgo...' | base64 -D > output.png

# Extract Base64 from a data URI and decode
echo 'data:image/png;base64,iVBORw0KGgo...' | \
  sed 's/^data:.*base64,//' | base64 -d > output.png

# Identify the image format from the decoded file
file output.png
# → output.png: PNG image data, 64 x 64, 8-bit/color RGBA

Frequently Asked Questions