Zum Inhalt springen
FileTinker

Bild in Base64

Wandeln Sie ein Bild in einen Base64-Daten-URI um, um es direkt in CSS oder HTML einzubetten — oder fügen Sie Base64 ein, um es wieder in ein herunterladbares Bild zu verwandeln. Alles läuft in Ihrem Browser.

In die andere Richtung konvertieren

Möchten Sie von Base64 zurück in ein Bild wechseln? Nutzen Sie die dafür vorgesehene Seite:

Anleitung: Bild in Base64 umwandeln

  1. Legen Sie ein Bild ab (oder wechseln Sie zu Base64 → Bild und fügen Sie Base64 ein).
  2. Kopieren Sie den Base64-Daten-URI — schalten Sie das Präfix data: ein oder aus.
  3. Fügen Sie ihn in Ihr CSS oder HTML ein oder dekodieren Sie ihn zurück in ein Bild.

Über die Base64-Kodierung von Bildern

Wenn Sie ein Bild als Base64 kodieren, wird es zu einer Textzeichenfolge, die Sie direkt in einen CSS-Hintergrund, ein HTML-img-Tag oder eine JSON-Nutzlast einbetten können — ganz ohne separate Dateianfrage. Das ist praktisch für kleine Symbole, Inline-E-Mail-Bilder und Daten-URIs, macht die Daten jedoch um etwa 33 % größer und eignet sich daher am besten für kleine Ressourcen.

Dieses Tool konvertiert in beide Richtungen vollständig in Ihrem Browser: Legen Sie ein Bild ab, um seinen Daten-URI zu erhalten, oder fügen Sie einen Daten-URI / eine Base64-Zeichenfolge ein, um das Bild in der Vorschau anzuzeigen und herunterzuladen. Nichts wird hochgeladen, sodass private Bilder auf Ihrem Gerät bleiben.

Die Größe ist nicht der einzige Nachteil der Inline-Einbettung. Ein Base64-codiertes Bild ist Teil des Dokuments, in dem es eingebettet ist, sodass der Browser es nicht separat zwischenspeichern, verzögert laden oder auf verschiedenen Seiten wiederverwenden kann, wie es bei einer normalen Bilddatei der Fall wäre – eine Änderung an einem einzigen Byte der Seite führt dazu, dass die gesamte Datei erneut heruntergeladen wird. Auch die Unterstützung ist begrenzt: Einige E-Mail-Programme, insbesondere Outlook, weigern sich, Daten-URI-Bilder überhaupt anzuzeigen.

Sie werden auf Base64-kodierte Bilder an mehr Stellen stoßen als auf manuell geschriebenes CSS. Canvas-basierte Zeichenanwendungen exportieren ihre Ergebnisse über `toDataURL`, Screenshot- und Signatur-Widgets speichern ihre Ausgaben als Daten-URIs, APIs geben generierte Bilder als Base64-Felder in JSON zurück, und bei der Erstellung von HTML-Dateien werden alle Grafiken direkt in die Datei eingebettet. Wenn eine dieser Zeichenketten in Ihren Händen landet – in einem Protokoll, einer Datenbankspalte oder im Quellcode einer Seite –, ist das Dekodieren in eine echte Datei in der Regel der schnellste Weg, um zu sehen, was sie enthält.

Häufige Fragen

Was ist ein Daten-URI?

Ein Daten-URI bettet die Bytes einer Datei direkt als Base64 in eine URL ein, etwa data:image/png;base64,… — Sie können ihn ohne separate Datei als Bildquelle oder CSS-Hintergrund verwenden.

Warum ist das Base64 größer als die Datei?

Base64 stellt 3 Bytes mit 4 ASCII-Zeichen dar, sodass der Text etwa 33 % größer ist als das ursprüngliche Bild. Es eignet sich am besten für kleine Ressourcen wie Symbole.

Kann ich Base64 zurück in ein Bild umwandeln?

Ja. Wechseln Sie zu Base64 → Bild, fügen Sie einen Daten-URI oder rohes Base64 ein und zeigen Sie das dekodierte Bild in der Vorschau an und laden Sie es herunter.

Wird mein Bild hochgeladen?

Nein. Beide Richtungen laufen vollständig in Ihrem Browser, sodass Ihr Bild oder Base64 niemals Ihr Gerät verlässt.

Verändert oder komprimiert die Base64-Kodierung mein Bild?

Nein. Base64 ist eine alternative Schreibweise der exakten Bytes einer Datei, wobei 64 sichere ASCII-Zeichen verwendet werden – es wird nichts komprimiert, die Größe wird nicht verändert oder die Datei neu kodiert, und beim Dekodieren wird eine Datei erzeugt, die identisch mit der ursprünglichen Datei ist. Die Qualität bleibt unverändert, da die Pixel nicht verändert werden. Wenn Sie eine kürzere Zeichenfolge benötigen, komprimieren oder verkleinern Sie das Bild, bevor Sie es kodieren – Base64 selbst wird eine Datei niemals kleiner machen.