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
- Umwandlungsrichtung wählen Wählen Sie je nach Vorhaben entweder „Datei → Base64" oder „Base64 → Datei".
- 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.
- Automatische Umwandlung abwarten Sobald Sie die Eingabe auswählen oder einfügen, erfolgt die Umwandlung sofort in Ihrem Browser.
- 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.
- 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 dassrc-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/pngoderapplication/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
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.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.
Ü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.