Bild zu Base64: Daten-URIs richtig gemacht

Die Umwandlung eines Bildes in Base64 erzeugt aus einer Binärdatei einen langen ASCII-String, den Sie direkt in HTML, CSS, JSON oder eine Datenbankspalte einfügen können. Dieser String wird zu einem Data-URI wie data:image/png;base64,iVBORw0KGgo..., und der Browser rendert ihn, als ob eine echte Bilddatei geladen würde. Der Haken, den die meisten Konverter-Seiten nie erwähnen: Base64 macht jedes Bild etwa 33% größer, daher ist Inlining ein Werkzeug, das man in bestimmten Fällen einsetzt, nicht als Standard.

Diese Anleitung zeigt die genaue Syntax, das korrekte MIME-Präfix für jedes Format, wie man ein Bild im Browser und im Code kodiert, und die Caching-Mathematik, die entscheidet, ob das Inlining eines bestimmten Bildes eine kluge Entscheidung oder ein Fehler ist.

Was ist ein Base64-Bild-Daten-URI?#

Ein Daten-URI ist eine Möglichkeit, Dateiinhalte direkt in ein Dokument einzubetten, anstatt auf eine externe Datei zu verlinken. Für Bilder ist das Format festgelegt und vorhersagbar:

data:[<MIME-Typ>][;base64],<codierte Daten>

Ein echtes PNG-Beispiel sieht so aus (gekürzt):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ...

Drei Teile sind wichtig:

• data: teilt dem Browser mit, dass es sich um Inline-Daten handelt, nicht um eine abzurufende URL.
• image/png;base64 ist der MIME-Typ plus das Codierungsflag. Dieser Teil wird oft falsch gemacht.
• Alles nach dem Komma sind die base64-codierten Bytes des eigentlichen Bildes.

Da das gesamte Bild in der Zeichenkette lebt, stellt der Browser keine separate Netzwerkanfrage dafür. Diese eine Eigenschaft ist der einzige Grund, warum Daten-URIs existieren, und die Quelle aller Kompromisse in diesem Artikel.

Kurz gesagt: Base64 ist keine Komprimierung. Es ist das Gegenteil. Es ist eine Möglichkeit, binäre Daten nur mit sicheren Textzeichen darzustellen, und diese Darstellung ist immer größer als das Original.

Das MIME-Präfix pro Bildformat#

Die Verwendung des falschen MIME-Typs ist der häufigste Grund, warum ein eingebettetes Bild als defektes Symbol angezeigt wird. Das Präfix muss mit den tatsächlichen Dateibytes übereinstimmen, nicht mit der Dateierweiterung, die Sie zu haben glauben.

Bildformat	Korrektes Daten-URI-Präfix
PNG	data:image/png;base64,
JPEG	data:image/jpeg;base64,
GIF	data:image/gif;base64,
WebP	data:image/webp;base64,
SVG	data:image/svg+xml;base64,
ICO (Favicon)	data:image/x-icon;base64,

Beachten Sie, dass JPEG image/jpeg ist, niemals image/jpg, auch wenn die Dateierweiterung normalerweise .jpg ist. SVG ist ein Sonderfall, da es sich um Text und nicht um Binärdaten handelt, sodass Sie base64 oft überspringen und stattdessen URL-Codierung verwenden können (dazu später mehr).

Wie konvertiert man ein Bild in Base64#

Sie haben drei praktische Wege, je nachdem, ob Sie einen einmaligen String, eine browser-seitige Konvertierung in Ihrer eigenen App oder eine Build-Step-Ausgabe benötigen. Hier ist der schnellste Weg zuerst, dann der Code.

Schritt 1: Holen Sie sich den String mit einem No-Install-Konverter#

Für eine schnelle einmalige Konvertierung müssen Sie keinen Code schreiben. Ziehen Sie die Datei in einen Base64-Encoder und -Decoder oder verwenden Sie den dedizierten Bild-zu-Base64-Konverter, wenn Sie das vollständige data:image/...-Präfix automatisch generieren lassen möchten. Sie fügen ein oder laden hoch, kopieren die Ausgabe und sind fertig. Das ist die richtige Wahl, wenn Sie den String nur einmal für eine CSS-Regel oder eine E-Mail-Vorlage benötigen.

Die Konvertierung läuft in Ihrem Browser, sodass das Bild Ihren Rechner nie verlässt. Das ist wichtig, wenn es sich um ein privates Asset, ein Kundenlogo oder etwas handelt, das Sie nicht in ein zufälliges Online-Tool einfügen würden.

Schritt 2: Im Browser mit FileReader codieren#

Wenn Sie Bilder in Ihrer eigenen Web-App konvertieren müssen (z.B. ein Benutzer lädt einen Avatar hoch und Sie möchten ihn vor dem Senden in der Vorschau anzeigen), liefert die FileReader-API direkt einen Data-URI:

function fileToDataURL(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result); // bereits ein vollständiger data: URI
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// Verwendung
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async () => {
  const dataURL = await fileToDataURL(input.files[0]);
  document.querySelector('img').src = dataURL; // wird sofort angezeigt
});

readAsDataURL gibt den vollständigen data:image/png;base64,...-String inklusive Präfix zurück, sodass Sie ihn direkt einem img-src oder einem background-image zuweisen können. Keine manuelle MIME-Erkennung erforderlich.

Schritt 3: Auf dem Server oder zur Build-Zeit codieren#

In Node.js lesen Sie die Datei als Buffer und rufen toString('base64') auf, dann bauen Sie das Präfix selbst:

import { readFileSync } from 'node:fs';

const bytes = readFileSync('logo.png');
const base64 = bytes.toString('base64');
const dataURI = `data:image/png;base64,${base64}`;

In Python ist es fast identisch:

import base64

with open("logo.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode("ascii")

data_uri = f"data:image/png;base64,{encoded}"

Build-Tools wie webpack und Vite automatisieren dies. Vite beispielsweise bindet jedes Asset unterhalb einer Größenbeschränkung (standardmäßig 4 KB) automatisch als Base64-Data-URI ein und belässt größere Dateien als normale URLs. Diese Standardbeschränkung existiert genau wegen der Größenberechnung im nächsten Abschnitt.

Wo Sie Base64-Bilder tatsächlich einsetzen#

Der String ist nutzlos, bis Sie ihn irgendwo platzieren. Die drei häufigsten Verwendungen:

In HTML als img-Quelle:

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Inline-Logo" />

In CSS als Hintergrund:

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...");
}

In JSON oder einem API-Payload, wenn Sie keine rohen Binärdaten senden können, sodass das Bild als String-Feld mitreist:

{ "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..." }

Dieser JSON-Fall ist einer der stärksten legitimen Anwendungsfälle. Wenn eine API nur JSON akzeptiert und Sie ein Bild inline transportieren müssen, ist Base64 die Standardlösung.

Die 33% Größenstrafe, die niemand erwähnt#

Hier ist, was die Seiten zum Konvertieren von Teilen völlig übersehen. Base64 kodiert 3 Bytes Binärdaten in 4 ASCII-Zeichen. Dieses Verhältnis ist fest: 4/3, was einer Erhöhung von etwa 33% entspricht, bevor man überhaupt Padding zählt. Ein 90KB PNG wird zu etwa 120KB Base64-Text.

Dieser Overhead verschwindet nicht. Er landet in Ihrer HTML- oder CSS-Datei, was bedeutet:

• Größere HTML- oder CSS-Payloads. Die kodierten Bytes sind jetzt Teil des Dokuments, das der Browser herunterladen und parsen muss.
• Kein Streaming oder progressives Rendern. Ein verlinktes Bild kann rendern, während es ankommt. Ein eingebettetes erscheint erst, nachdem sein gesamter String als Teil der übergeordneten Datei heruntergeladen wurde.
• Gzip hilft, aber nicht genug. Komprimierung holt einen Teil des Verlusts zurück, da Base64-Text sich wiederholt, aber man kommt selten wieder auf die ursprüngliche Binärgröße, und die CPU-Kosten für das Dekodieren des Strings sind auf schwachen Geräten real.

Warnung: Das Einbetten eines großen Hero-Bildes oder Fotos ist fast immer ein Fehler. Ein 500KB Foto wird zu etwa 665KB Base64, das in Ihr HTML eingefügt wird und die Seite blockiert, während es heruntergeladen wird. Lassen Sie es als verlinkte Datei.

Wenn Ihr Ziel ein kleineres Bild ist und kein eingebettetes, ist die Kodierung der falsche Hebel. Verkleinern Sie die Datei zuerst mit einem kostenlosen Bildkompressor und entscheiden Sie dann, ob das nun kleinere Asset überhaupt eingebettet werden soll.

Wann inline und wann verlinken#

Die Entscheidung hängt von einer Frage ab: Sparen Sie durch das Vermeiden einer HTTP-Anfrage mehr als die 33% Aufblähung kostet? Verwenden Sie dies als Faustregel.

Als Base64 inline einbetten, wenn	Als normale Datei verlinken, wenn
Winzige Assets: kleine Symbole, 1px Abstandshalter, einfache SVGs	Fotos, Hero-Bilder, alles über ~5KB
Das Bild ist kritisch und Sie möchten null zusätzliche Anfragen	Das Bild kann lazy-geladen werden oder erscheint unter dem Falz
Sie senden ein Bild in JSON oder einem E-Mail-Text	Das Bild wird auf vielen Seiten wiederverwendet (Caching gewinnt)
Das Asset wird nur einmal verwendet und ist einzigartig für eine Seite	Das Asset profitiert von einem CDN oder Browser-Cache

Der Caching-Punkt ist der, den Entwickler am häufigsten vergessen. Ein verlinktes Bild wird einmal gecached und auf jeder Seite und bei jedem erneuten Besuch wiederverwendet. Ein inline eingebettetes Bild wird jedes Mal im Dokument erneut heruntergeladen, auf jeder Seite, ohne eigenen Cache-Vorteil. Für ein Logo, das auf der gesamten Website erscheint, gewinnt das Verlinken eindeutig. Für ein einmaliges Symbol auf einer einzelnen Landingpage kann Inline eine Anfrage sparen, mit vernachlässigbaren Kosten.

Bei modernen HTTP/2- und HTTP/3-Verbindungen ist die ursprüngliche Rechtfertigung für Inline (Vermeidung der Kosten vieler paralleler Anfragen) viel schwächer als in der HTTP/1.1-Ära. Request-Multiplexing machte kleine Dateien günstig abrufbar. Das ist ein weiterer Grund, heute sparsam mit Inline umzugehen.

SVG: Das Format, bei dem Sie Base64 oft überspringen können#

SVG ist XML-Text, kein Binärformat, daher ist Base64 meist die falsche Wahl. Sie können ein URL-kodiertes SVG direkt in CSS einfügen und den Kodierungsaufwand komplett vermeiden:

.checkmark {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"...%3E');
}

Die URL-Kodierung eines SVGs bleibt lesbar und vermeidet den 33%igen Base64-Aufschlag, da Sie nur die wenigen Zeichen escapen müssen, die innerhalb einer CSS-url() stören. Heben Sie sich Base64 für Binärformate (PNG, JPEG, WebP) auf, bei denen es keine lesbare Alternative gibt.

Decodieren eines Base64-Bildes zurück in eine Datei#

Der umgekehrte Weg ist genauso üblich. Wenn Sie einen Data-URI haben und die Originaldatei benötigen, entfernen Sie das Präfix und decodieren Sie den Rest. Im Browser:

function dataURLtoBlob(dataURL) {
  const [meta, b64] = dataURL.split(',');
  const mime = meta.match(/data:(.*?);base64/)[1];
  const binary = atob(b64);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
  return new Blob([bytes], { type: mime });
}

Für eine schnelle manuelle Decodierung ohne Code fügen Sie den String (mit oder ohne Präfix) in dasselbe Base64-Codec-Tool ein und laden Sie das rekonstruierte Bild herunter. Wenn Sie eine ausführlichere Anleitung zum Hin- und Herkonvertieren von Bildern über Base64 und Data-URIs wünschen, finden Sie im Leitfaden zum Codieren und Decodieren von Base64-Bildern und Data-URIs den vollständigen Zyklus mit Beispielen.

Häufige Fehler, die Inline-Bilder zerstören#

Ein paar Fehler sind für fast alle Situationen mit defekten Symbolen verantwortlich:

• Falscher MIME-Typ. Ein JPEG als image/png zu kennzeichnen, verwirrt einige Renderer. Passen Sie das Präfix an die tatsächlichen Bytes an.
• Zeilenumbrüche einfügen. Manche Tools brechen die Base64-Ausgabe nach 76 Zeichen um. In einem HTML-Attribut oder einer CSS-Regel können diese Zeilenumbrüche die Zeichenfolge zerstören. Verwenden Sie eine einzige ununterbrochene Zeile.
• ;base64 vergessen. Ohne dieses Flag behandelt der Browser die Daten als Klartext oder URL-kodierten Inhalt, nicht als kodierte Binärdaten.
• Riesige Bilder einbetten. Technisch gültig, praktisch ein Performance-Problem. Achten Sie auf Ihre Dokumentgröße.
• Private Bilder in unvertraute Online-Kodierer einfügen. Bevorzugen Sie einen Konverter, der clientseitig läuft, damit die Datei nie hochgeladen wird.

Ein Bild in Base64 umwandeln, in der Praxis#

Zusammengefasst: Wählen Sie das korrekte MIME-Präfix, kodieren Sie mit einem clientseitigen Tool oder FileReader und kalkulieren Sie die etwa 33% größere Dateigröße ein. Verwenden Sie Inline-Base64 nur für kleine, einmalige, rendernotwendige Assets. Fotos und wiederholt genutzte Bilder bleiben als verlinkte Dateien, damit der Browser-Cache seine Arbeit tun kann. SVGs sollten meist URL-kodiert werden, nicht Base64.

Wenn Sie den String schnell und sicher benötigen, verarbeitet der Base64-Kodierer und Dekodierer beide Richtungen im Browser, und der dedizierte Bild-zu-Base64-Konverter erstellt die vollständige data:image/...-Daten-URI, die Sie direkt in Ihr Markup einfügen können.

Häufig gestellte Fragen#

Wie konvertiere ich ein Bild in Base64? Laden Sie die Datei in einen clientseitigen Encoder hoch oder fügen Sie sie ein, oder verwenden Sie Code: Rufen Sie im Browser FileReader.readAsDataURL(file) auf, und lesen Sie in Node.js die Datei als Buffer und rufen Sie buffer.toString('base64') auf. Fügen Sie dann das korrekte Präfix hinzu, z.B. data:image/png;base64,, um eine nutzbare Data-URI zu erhalten.

Warum ist mein Base64-Bild größer als die Originaldatei? Base64 stellt 3 Byte Binärdaten als 4 Textzeichen dar, was die Größe vor Padding um etwa 33% erhöht. Es handelt sich um eine Kodierung, nicht um ein Komprimierungsformat, daher ist die kodierte Version immer größer. Wenn Sie eine kleinere Datei benötigen, komprimieren Sie das Bild zuerst und entscheiden Sie dann, ob Sie es inline einbetten.

Was ist das korrekte Data-URI-Präfix für ein JPEG? Es lautet data:image/jpeg;base64, mit image/jpeg und niemals image/jpg. Die Dateierweiterung auf der Festplatte ist normalerweise .jpg, aber der MIME-Typ in der Data-URI muss jpeg sein. Ein falsches Präfix ist der häufigste Grund, warum ein Inline-Bild als defektes Symbol angezeigt wird.

Sollte ich Bilder als Base64 für die Leistung inline einbetten? Nur für sehr kleine, einmalig verwendete, renderkritische Assets wie kleine Symbole. Inlining vermeidet eine HTTP-Anfrage, fügt aber 33% Overhead zu Ihrem HTML oder CSS hinzu, verhindert das separate Caching des Bildes durch den Browser und lädt es bei jeder Seite erneut herunter. Mit HTTP/2 und HTTP/3 ist der Vorteil der eingesparten Anfrage geringer als früher. Verlinken Sie daher Fotos und wiederverwendete Bilder stattdessen.

Benötige ich Base64 für SVG-Bilder? Normalerweise nicht. SVG ist Text, daher können Sie es URL-kodiert in ein CSS url() einfügen und den 33% Base64-Overhead vollständig vermeiden, während der Markup lesbar bleibt. Reservieren Sie Base64 für binäre Formate wie PNG, JPEG und WebP, bei denen es keine textbasierte Alternative gibt.

Ist es sicher, einen Online-Bild-zu-Base64-Konverter zu verwenden? Das hängt davon ab, ob das Tool die Datei in Ihrem Browser verarbeitet oder auf einen Server hochlädt. Für private Assets wie Kundenlogos verwenden Sie einen Konverter, der clientseitig arbeitet, sodass das Bild Ihren Rechner nie verlässt. Molixas Base64- und Bild-zu-Base64-Tools kodieren aus genau diesem Grund lokal im Browser.