Base64 Image Decoder

Apa Itu Dekode Gambar Base64?

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.

Skenario umum bagi pengembang adalah bekerja dengan REST API yang mengembalikan foto profil atau thumbnail dokumen sebagai string Base64 di dalam bidang JSON, misalnya {"avatar": "data:image/png;base64,iVBORw0KGgo..."}. Untuk menggunakan gambar, Anda mengekstrak nilai bidang, menghapus awalan skema data URI hingga dan termasuk koma, kemudian meneruskan karakter Base64 yang tersisa melalui decoder seperti atob() di JavaScript atau base64.b64decode() di Python untuk memulihkan byte mentah. Menempel nilai lengkap ke alat ini melewati semua langkah manual ini dan merender gambar secara instan.

Mengapa Menggunakan Base64 Image Decoder Ini?

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

Kasus Penggunaan Dekode Gambar Base64

Struktur Data URI untuk Gambar

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:

Mendeteksi Format Gambar dari 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:

Contoh Kode

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

Pertanyaan yang Sering Diajukan