Was ist ein Data-URI?

Das Bild selbst, als Textzeichenkette geschrieben. Er lässt sich überall dort einsetzen, wo sonst eine Bildadresse stünde — in CSS, in HTML oder in einer E-Mail-Vorlage.

Warum ist die Zeichenkette größer als die Datei?

Base64 stellt drei Bytes durch vier Zeichen dar. Der Zuwachs von rund einem Drittel ist der Preis dafür, Binärdaten als Text transportieren zu können.

Gibt es eine Größenbegrenzung?

Keine feste. Praktisch sollten Sie ab etwa fünf Kilobyte eine normale Datei verwenden — größere Data-URIs blähen das HTML auf und lassen sich nicht zwischenspeichern.

Wird mein Bild hochgeladen?

Nein. Die Kodierung passiert vollständig in Ihrem Browser.

Bild in Base64 umwandeln

Ein Bild ablegen und den fertigen Data-URI erhalten — oder einen Base64-String einfügen und das Bild zurückbekommen. Alles im Browser.

oder irgendwo auf dieser Seite ablegen

JPG, PNG, WEBP, GIF, BMP

Ihre Dateien bleiben im Browser. Nichts wird hochgeladen.

Ein Bild ablegen, um seinen Base64-Data-URI zu erhalten — fertig zum Einfügen in CSS oder HTML.

So wandeln Sie ein Bild in Base64 um

Bild in das Feld oben ziehen oder zum Auswählen klicken.
Den fertigen Data-URI kopieren — oder gleich die Variante für CSS oder HTML.

Bilder direkt einbetten, ohne zusätzliche Anfrage

Ein Data-URI ist das Bild selbst, als Text geschrieben. Steht es direkt im Stylesheet oder im HTML, muss der Browser keine zweite Datei anfordern — das Bild ist schon da, wenn die Seite ankommt. Für kleine Symbole, Aufzählungszeichen und Hintergrundmuster spart das eine ganze Anfrage pro Bild.

Wann eine normale Datei besser ist

Base64 macht die Daten rund ein Drittel größer und lässt sich nicht zwischenspeichern: Der Browser lädt das eingebettete Bild bei jedem Seitenaufruf erneut mit. Ab ungefähr fünf Kilobyte ist eine gewöhnliche Bilddatei die bessere Wahl — sie wird einmal geladen und danach aus dem Cache genommen.

Zurück vom Base64 zum Bild

Der umgekehrte Weg funktioniert ebenso: Base64-Zeichenkette oder Data-URI einfügen, und Sie sehen sofort das Bild und können es herunterladen. Das Format wird an den ersten Bytes erkannt, nicht an der Beschriftung — die Dateiendung stimmt also auch dann, wenn der Kopf der Zeichenkette etwas anderes behauptet.

Von Haus aus privat

Kodiert und dekodiert wird in Ihrem Browser. Weder das Bild noch die Zeichenkette werden irgendwohin gesendet — was zählt, wenn der Data-URI aus einem internen Projekt stammt.

Frequently asked questions

Was ist ein Data-URI?: Das Bild selbst, als Textzeichenkette geschrieben. Er lässt sich überall dort einsetzen, wo sonst eine Bildadresse stünde — in CSS, in HTML oder in einer E-Mail-Vorlage.
Warum ist die Zeichenkette größer als die Datei?: Base64 stellt drei Bytes durch vier Zeichen dar. Der Zuwachs von rund einem Drittel ist der Preis dafür, Binärdaten als Text transportieren zu können.
Gibt es eine Größenbegrenzung?: Keine feste. Praktisch sollten Sie ab etwa fünf Kilobyte eine normale Datei verwenden — größere Data-URIs blähen das HTML auf und lassen sich nicht zwischenspeichern.
Wird mein Bild hochgeladen?: Nein. Die Kodierung passiert vollständig in Ihrem Browser.