Base64 Image Decoder

Wat 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.

Een veelvoorkomend scenario voor ontwikkelaars is het werken met een REST API die een profielfoto of documentminiatuur als een Base64-string in een JSON-veld retourneert, bijvoorbeeld {"avatar": "data:image/png;base64,iVBORw0KGgo..."}. Om de afbeelding te gebruiken, extraheert u de veldwaarde, verwijdert u het data-URI-voorvoegsel tot en met de komma, en voert u de resterende Base64-tekens door een decoder zoals atob() in JavaScript of base64.b64decode() in Python om de onbewerkte bytes terug te krijgen. Het plakken van de volledige waarde in deze tool slaat al deze handmatige stappen over en geeft de afbeelding onmiddellijk weer.

Waarom Deze Base64 Image Decoder Gebruiken?

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

Gebruiksscenario's voor Base64 Image Decoding

Data URI-structuur voor Afbeeldingen

A data URI packages the image type and encoded content into a single string. When decoding, each component tells the decoder how to reconstruct the original image:

Afbeeldingsformaat Detecteren vanuit 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:

Codevoorbeelden

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

Veelgestelde Vragen