Ein Bild in Base64 / Data URI encodieren

Eine Data-URI ist eine URL, die die Daten einer Ressource direkt enthält, anstatt auf eine externe Datei zu verweisen. Ihre allgemeine Form ist data:[<mediatype>][;base64],<data>. Für ein Bild hat man typischerweise data:image/png;base64,iVBORw0KGgo…. Die Ressource ist in HTML, CSS oder JSON eingebettet und wird ohne zusätzliche HTTP-Anfrage geladen.

Häufige Gründe:

• HTTP-Anfragen reduzieren: ein Icon direkt in das CSS einbetten statt es zusätzlich zum Dokument zu laden
• E-Mail-Signatur mit eingebettetem Bild: kein Risiko, dass das Bild als externer Inhalt blockiert wird
• Web Components / Web Workers: wo das Laden einer externen Ressource häufig Scope- oder CORS-Probleme verursacht
• Lokaler Speicher (LocalStorage, IndexedDB, Datenbank): ein Avatar-Vorschaubild als Zeichenkette serialisieren
• Eigenständige Snippets: eine HTML-Datei, die ohne externe Abhängigkeiten auskommt

Konkrete Kontexte, in denen Base64-Bildkodierung sinnvoll ist:

• Inline-SVG-Icons in CSS (background-image: url("data:image/svg+xml;base64,…"))
• Personalisierte E-Mail-Signaturen mit Logo
• Schnelles Prototyping einer eigenständigen, per E-Mail geteilten Seite
• Eigenständige Web Components (eine einzelne bereitstellbare Datei)
• Browser-seitige PDF-Generierung (jsPDF) mit eingebetteten Vorschaubildern
• Testdaten (Mocks), die Bilder enthalten

Drei Schritte:

1. Laden Sie Ihr Bild (PNG, JPG, SVG, WebP, GIF) über den Uploadbereich hoch
2. Klicken Sie auf "Kodieren"
3. Kopieren Sie die resultierende Data-URI mit der entsprechenden Schaltfläche und fügen Sie sie in Ihr HTML, CSS oder JSON ein

Base64 ist keine universelle Lösung. Einige Hinweise:

• Base64 erhöht die Größe um ~33 %: 4 ASCII-Zeichen für je 3 Binär-Bytes
• Kodierte Bilder werden vom Browser nicht separat gecacht; sie werden zusammen mit dem HTML/CSS, das sie enthält, neu geladen
• Zu bevorzugen für Bilder unter 10 KB; darüber ist eine externe Datei in der Regel effizienter
• Für SVG URL-Encoding bevorzugen (via encodeURIComponent) statt Base64: das Ergebnis ist kürzer und bleibt als Text lesbar
• Moderne Build-Tools (Webpack, Vite) automatisieren die Wahl Base64 vs. externe Datei über eine konfigurierbare Größenschwelle

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (Mock-Daten):

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Was ist der Unterschied zwischen Base64 und Binär?

Binär repräsentiert die rohen Bytes einer Datei. Base64 ist eine Kodierung, die diese Bytes in 64 druckbare ASCII-Zeichen umwandelt (A-Z, a-z, 0-9, +, /). Textkontexte (HTML, JSON, E-Mail) können kein Binär transportieren; Base64 löst dieses Problem auf Kosten eines Größenoverheads von 33 %.

Warum ist meine Data-URI so lang?

Ein 30 KB großes Bild in Binär wird zu ~40 KB in Base64. Und jedes Zeichen ist ein ASCII-Byte, daher ist die Zeichenkette lang. Das ist der Kodierung inhärent. Für große Bilder eine externe Datei verwenden.

Unterstützen alle Browser Data-URIs?

Ja, ausnahmslos unter modernen Browsern (Chrome, Firefox, Safari, Edge, sogar IE8). Historische Einschränkung: IE8 hatte ein Limit von 32 KB. Heute kein Problem mehr.

Wie dekodiert man eine Data-URI?

Unser Base64-Bild-Dekoder führt die umgekehrte Operation durch: fügen Sie Ihre Data-URI ein und erhalten Sie die Bilddatei (PNG, JPG, SVG, WebP) zum Herunterladen oder Speichern.

Base64 vs. URL-Encoding für SVG?

Für SVG erzeugt URL-Encoding (mit encodeURIComponent) eine kürzere Zeichenkette als Base64 und bleibt als Text lesbar. Das ist die empfohlene Wahl in CSS beim Einbetten eines Inline-SVG. Für Binärformate (PNG, JPG) bleibt Base64 obligatorisch.

Beeinflusst die Base64-Kodierung die Bildqualität?

Nein. Die Kodierung ist verlustfrei: es handelt sich um eine Bijektion Binär-Byte <-> Base64-Zeichenkette. Die Originalpixel bleiben streng erhalten. Nur die Größe der transportierten Datei steigt um 33 %.