Datei-zu-Base64-Konverter (mit data-URI-Unterstützung, in beide Richtungen)

Wandeln Sie eine beliebige Datei (Bild, PDF und mehr) in eine Base64-Zeichenkette oder data-URI um, oder decodieren Sie eine Base64-Zeichenkette / data-URI zurück in eine herunterladbare Datei. Alles läuft im Browser ab; Dateien werden niemals an einen Server gesendet.

Was ist die Umwandlung von Datei zu Base64?

Base64 ist ein Kodierungsverfahren, das binäre Daten – Bilder, PDFs und jeden anderen Dateityp – mit nur 64 druckbaren Zeichen darstellt: A–Z, a–z, 0–9, + und /. Entwickler greifen darauf zurück, wenn Dateiinhalte an einer Stelle eingebettet werden müssen, die nur sicher Text transportieren kann, etwa in einer JSON-Nutzlast, einem CSS-Stylesheet oder rohem HTML. Setzt man die MIME-Typ-Information vor die kodierte Zeichenkette, wie in data:image/png;base64,..., entsteht eine data-URI, die ein Browser direkt als Bild interpretieren kann, ohne eine separate Datei nachzuladen.

Dieses Tool deckt beide Richtungen ab: die Umwandlung einer beliebigen Datei in eine Base64-Zeichenkette oder data-URI sowie die Dekodierung einer Base64-Zeichenkette oder data-URI zurück in die Originaldatei zum Herunterladen. Die gesamte Umwandlung läuft als JavaScript in Ihrem Browser über die FileReader- und Blob-APIs ab, sodass Dateiinhalte niemals an einen externen Server übertragen werden. Das macht es ebenso nützlich, um einen rätselhaften Base64-Ausschnitt im Quellcode einer fremden Seite schnell zu prüfen, wie für den Umgang mit sensiblen Dateien, die Sie lieber nirgendwo hochladen möchten.

So wandeln Sie Dateien in Base64 um und zurück

  1. Umwandlungsrichtung wählen Wählen Sie je nach Vorhaben entweder „Datei → Base64" oder „Base64 → Datei".
  2. Datei oder Base64-Text angeben Im Modus Datei → Base64 ziehen Sie eine Datei hinein oder wählen sie aus. Im Modus Base64 → Datei fügen Sie eine Base64-Zeichenkette oder eine data-URI ein.
  3. Automatische Umwandlung abwarten Sobald Sie die Eingabe auswählen oder einfügen, erfolgt die Umwandlung sofort in Ihrem Browser.
  4. Erkannten MIME-Typ prüfen (Base64 → Datei) Ist die Eingabe keine vollständige data-URI, erscheint ein Auswahlmenü für den MIME-Typ – wählen Sie das zur Originaldatei passende Format.
  5. Ergebnis kopieren oder Datei herunterladen Kopieren Sie die kodierte Zeichenkette oder laden Sie die wiederhergestellte Datei herunter, um den Vorgang abzuschließen.

Tipps für die Nutzung

  • Der Modus Datei → Base64 akzeptiert jeden Dateityp – Bilder, PDFs, Audio und mehr – und lässt Sie sowohl die data-URI-Form als auch die reine Base64-Zeichenkette kopieren.
  • Im Modus Base64 → Datei fügen Sie einen vollständigen data-URI ein, der mit data: beginnt, und der MIME-Typ wird automatisch erkannt. Bei einer reinen Base64-Zeichenkette wählen Sie den MIME-Typ manuell aus.
  • Die gesamte Umwandlung läuft vollständig im JavaScript Ihres Browsers ab – der Dateiinhalt oder die Base64-Zeichenkette wird niemals an einen Server gesendet, was dies auch für sensible Dateien sicher macht.
  • Um ein kleines Symbol direkt in CSS oder HTML einzubetten, fügen Sie die data-URI-Ausgabe direkt in background-image: url(...) oder in das src-Attribut eines <img>-Tags ein.
  • Durch die Base64-Kodierung wird die Ausgabe etwa 33 % größer als die Originaldatei, sodass die Umwandlung sehr großer Dateien (mehrere zehn Megabyte oder mehr) den Browser spürbar verlangsamen kann.

Typische Anwendungsfälle

Ein kleines Symbol direkt in CSS einbetten

Wandeln Sie ein Symbolbild in eine data-URI um und setzen Sie sie direkt in eine background-image-Eigenschaft ein, um eine zusätzliche HTTP-Anfrage für ein winziges Asset zu vermeiden.

Eine Datei innerhalb einer JSON-API-Nutzlast versenden

Kodieren Sie ein Bild oder einen Anhang als Base64-Zeichenkette, damit er als einfacher Textwert im Rumpf einer JSON-Anfrage oder -Antwort transportiert werden kann.

Einen im Quellcode gefundenen Base64-Ausschnitt prüfen

Fügen Sie eine unbekannte, in HTML- oder CSS-Quellcode entdeckte Base64-Zeichenkette ein, um sie zurück in eine anzeigbare Datei zu dekodieren und ihren Inhalt genau zu sehen.

Ein Bild direkt in eine HTML-E-Mail einbetten

Kodieren Sie ein Logo oder Symbol per Base64, um es ohne separaten Anhang direkt in den Rumpf einer HTML-E-Mail einzubetten.

Glossar

Base64
Ein Kodierungsverfahren, das binäre Daten mit nur 64 druckbaren ASCII-Zeichen darstellt: A–Z, a–z, 0–9, + und /. Es handelt sich nicht um Verschlüsselung, sondern lediglich um eine Möglichkeit, beliebige Bytes sicher als Text zu transportieren.
Data-URI
Ein Format, das den Base64-kodierten Inhalt einer Datei direkt in eine URL einbettet. Da es auch die MIME-Typ-Information trägt, kann es direkt als Bildquelle oder als CSS-Hintergrund verwendet werden.
MIME-Typ
Ein Bezeichner, der das Format einer Datei beschreibt, geschrieben als „Typ/Untertyp" (zum Beispiel image/png oder application/pdf). Browser nutzen ihn, um zu entscheiden, wie eine Datei zu behandeln ist.
Kodierung
Der Vorgang, Daten von einer Darstellung in eine andere umzuwandeln. Die Base64-Kodierung wandelt konkret binäre Daten in eine druckbare Textzeichenkette um.
Client-seitige Verarbeitung
Die vollständige Verarbeitung von Daten im Browser des Nutzers, statt sie an einen Server zu senden. Jede Umwandlung dieses Tools erfolgt client-seitig, sodass Dateien Ihr Gerät niemals verlassen.
Nutzlast-Größenzuwachs
Der durch die Base64-Kodierung verursachte Größenzuwachs von rund 33 %. Er ist eine unvermeidliche Folge davon, 8-Bit-Binärdaten in 6-Bit-Zeichen umzupacken.

Häufig gestellte Fragen

Base64 ist ein Kodierungsverfahren, das binäre Daten (Bilder, Audio, ausführbare Dateien oder jedes andere Format) mit nur 64 druckbaren ASCII-Zeichen darstellt: A–Z, a–z, 0–9, + und /. Es handelt sich nicht um Verschlüsselung, sondern lediglich um eine Möglichkeit, beliebige Bytes als sicheren, druckbaren Text darzustellen.

Eine data-URI bettet den Inhalt einer Datei direkt als Base64-kodierte Zeichenkette in eine URL ein, etwa data:image/png;base64,iVBOR.... Da sie auch den MIME-Typ enthält, können Sie sie direkt in das src-Attribut eines <img>-Tags oder in ein CSS-background-image einsetzen, um das Bild anzuzeigen.

Nein. Die Umwandlung dieses Tools (Kodierung und Dekodierung mittels FileReader und Blob) läuft vollständig als JavaScript in Ihrem Browser ab. Weder der Dateiinhalt noch die resultierende Base64-Zeichenkette werden jemals an einen Server gesendet.

Ja. Wenn der eingefügte Text keine vollständige data-URI ist, die mit data: beginnt, erscheint ein Auswahlmenü für den MIME-Typ – wählen Sie das ursprüngliche Dateiformat (Bild, PDF, Text usw.) manuell aus, bevor Sie herunterladen.

Base64 verpackt binäre Daten mit 8-Bit-Einheiten in 6-Bit-Zeichen um, sodass die kodierte Ausgabe etwa 4/3 der ursprünglichen Größe einnimmt – ein Zuwachs von rund 33 %. Dieser Mehraufwand ist eine unvermeidliche Eigenschaft der Funktionsweise von Base64.
Tool-kun

Übrigens – Warum Base64 Dateien um 33 % vergrößert

Base64-Kodierung existiert, weil viele Übertragungskanäle – E-Mail, JSON, URLs – nur druckbaren ASCII-Text sicher transportieren können. Beliebige Binärdaten (wie ein Bild oder eine ausführbare Datei) unverändert zu senden, birgt das Risiko einer Beschädigung durch versehentliche Steuerzeichen. Deshalb wurde Base64 entwickelt, um beliebige Binärdaten mit nur 64 druckbaren Zeichen darzustellen: A–Z, a–z, 0–9, + und /.

Base64 zerlegt 3 Byte (24 Bit) Binärdaten in vier 6-Bit-Blöcke und ordnet jedem Block ein Base64-Zeichen zu. Das Umverpacken von 8-Bit-Binärdaten in 6-Bit-Zeichen führt dazu, dass die kodierte Ausgabe am Ende etwa 4/3 der Originalgröße einnimmt – ein Zuwachs von rund 33 %. Dieser Größenzuwachs ist der Preis für einen textsicheren Transport.

Genau dieser Trick wird bei data-URIs genutzt, die kleine Bilder direkt in HTML oder CSS als data:image/png;base64,... einbetten. So wird eine zusätzliche HTTP-Anfrage für winzige Assets wie Symbole vermieden, was das Laden der Seite beschleunigen kann. Der Größenzuwachs von rund 33 % und der Verlust des Browser-Caches machen diesen Ansatz jedoch für große Bilddateien wenig geeignet.