Base64 Image Decoder

Was ist Base64-Bilddekodierung?

Base64-Bilddekodierung ist das Gegenteil der Base64-Bildkodierung: Sie nimmt einen Base64-String oder ein data URI, das ein Bild darstellt, und wandelt es zurück in sichtbare binäre Pixeldaten um. Wenn Sie einen String wie data:image/png;base64,iVBORw0KGgo... erhalten, entfernt die Dekodierung das data URI-Präfix, kehrt die in RFC 4648 definierte Base64-Kodierung um und rekonstruiert die Original-Image-Bytes. Der Browser kann die dekodierten Bytes dann als sichtbares Bild rendern.

Data URIs (RFC 2397) bündeln den MIME-Typ und den Base64-codierten Inhalt in einen String. Sie erscheinen häufig in API-Antworten, HTML-E-Mail-Quellcode, CSS-Stylesheets und Datensätzen, in denen Bilder als Text statt als binäre Dateien gespeichert werden. Das Dekodieren dieser Strings ist erforderlich, um das Bild anzuzeigen, seinen Inhalt zu überprüfen oder es als eigenständige Datei zu speichern. Da Base64 vier ASCII-Zeichen verwendet, um alle drei Bytes der Binärdaten darzustellen, ist der codierte String immer etwa 33% größer als das Original-Image.

Dieses Tool analysiert sowohl vollständige data URIs (data:image/png;base64,...) als auch rohe Base64-Strings ohne das data:-Präfix. Bei Rohstrings wird das Bildformat automatisch erkannt, indem die ersten Base64-Zeichen überprüft werden, die den Magic Bytes der Datei entsprechen. Beispielsweise zeigt iVBORw0KGgo immer auf eine PNG-Datei hin. Das dekodierte Bild wird direkt im Browser gerendert und kann als Datei heruntergeladen werden.

Ein häufiges Szenario ist die Arbeit mit einer REST-API, die ein Profilfoto oder eine Dokumentminiatur als Base64-String in einem JSON-Feld zurückgibt – z. B. {"avatar": "data:image/png;base64,iVBORw0KGgo..."}. Um das Bild zu nutzen, extrahieren Sie den Feldwert, entfernen das data URI-Präfix bis zum Komma einschließlich und leiten die verbleibenden Base64-Zeichen durch einen Decoder wie atob() in JavaScript oder base64.b64decode() in Python um die Rohdaten wiederherzustellen. Das Einfügen des vollständigen Wertes in dieses Tool skippet alle manuellen Schritte und rendert das Bild sofort.

Warum diese Base64-Bilddekodierer verwenden?

Dieses Tool konvertiert Base64-Bilddaten vollständig in Ihrem Browser zurück in ein anzeigbares, herunterladbares Bild — keine Uploads, keine Serververarbeitung, kein Konto erforderlich.

Anwendungsfälle für Base64-Bilddekodierung

Datenstruktur von data URIs für Bilder

Ein data URI verpackt den Bildtyp und verschlüsselten Inhalt in einen String. Jede Komponente ist für die korrekte Dekodierung essentiell: das Schema (data:) signalisiert, dass die URL eigenständig ist und keine Referenz zu einer externen Ressource; der MIME-Typ (z.B. image/png) teilt dem Renderer mit, welches Format beim Interpretieren der Rohbytes verwendet werden soll; der ;base64,-Marker unterscheidet Base64-codierte Inhalte von data URIs, die Prozentcodierung für Klartext-Formate verwenden. Die Base64-Nutzlast selbst kann mit einem oder zwei Auffüllzeichen = enden — diese sind erforderlich, wenn die Eingangsbyteanzahl kein Vielfaches von drei ist, um sicherzustellen, dass die codierte Länge immer ein Vielfaches von vier ist. Das Weglassen oder Abschneiden eines dieser Komponenten führt zu Dekodierungsfehlern oder einem beschädigten Bild.

Erkennung des Bildformats aus Base64

Wenn eine Base64-String das data:-Präfix fehlt, kann das Bildformat durch Überprüfung der ersten Zeichen identifiziert werden. Diese Zeichen entsprechen den Magic Bytes der Datei — feste Bytefolgen am Anfang jeder Bilddatei, die das Format identifizieren:

Code-Beispiele

So dekodieren Sie Base64-Bildstrings zurück zu Bilddateien in beliebten Programmiersprachen und Umgebungen:

// 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

Häufig gestellte Fragen