Base64 Image Encoder

Was ist Base64-Bildkodierung?

Base64-Bildkodierung wandelt binäre Bilddaten in eine ASCII-Zeichenkette um, die direkt in HTML, CSS oder JSON eingebettet werden kann, ohne auf eine externe Datei zu verweisen. Das Ergebnis ist ein Data URI — eine eigenständige Zeichenkette, die mit data:image/png;base64, beginnt, gefolgt von den Base64-kodierten Bytes des Bildes. Browser behandeln Data URIs genauso wie externe Bild-URLs: Sie dekodieren die Base64-Nutzlast und rendern das Bild inline.

Die Technik ist in RFC 2397 (Data-URI-Schema) und RFC 4648 (Base64-Kodierung) definiert. Bei der Base64-Kodierung eines Bildes werden jeweils 3 Bytes binärer Pixeldaten in 4 ASCII-Zeichen umgewandelt, was die Datenmenge um etwa 33 % erhöht. Trotz dieses Mehraufwands entfällt durch eingebettete Bilder eine HTTP-Anfrage pro Asset — ein relevanter Vorteil bei kleinen Bildern (Icons, Logos, 1×1-Tracking-Pixel), bei denen die Round-Trip-Latenz einer separaten Anfrage die zusätzlichen Bytes überwiegt.

Data URIs werden von allen modernen Browsern, E-Mail-Clients (mit Einschränkungen) und in jedem Kontext unterstützt, der Standard-URI-Syntax akzeptiert. Sie werden häufig in Single-Page-Applikationen, HTML-E-Mail-Vorlagen, SVG-Sprites und CSS-background-image-Deklarationen eingesetzt, wo die Reduzierung der Netzwerkanfragen die wahrgenommene Ladezeit verbessert.

Warum diesen Base64 Image Encoder verwenden?

Dieses Tool wandelt jedes Bild direkt im Browser in einen einsatzbereiten Data URI um — kein Upload, kein Server, kein Konto erforderlich.

Anwendungsfälle für Base64-Bildkodierung

Struktur eines Data URI

Ein Data URI kodiert Bildformat und Binärinhalt in einer einzigen Zeichenkette. Das Verständnis seiner Struktur hilft beim programmatischen Erstellen oder Parsen von Data URIs:

Bildformat-Vergleich für Base64-Kodierung

Die Wahl des Bildformats beeinflusst die Base64-Ausgabegröße, Browser-Unterstützung und Darstellungseigenschaften. Das Format wählen, das am besten zum Inhalt passt:

Codebeispiele

Bilder in gängigen Sprachen und Umgebungen in Base64-Data-URIs umwandeln:

// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."

import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'

import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}

# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

Häufig gestellte Fragen