Base64: Text, Dateien und Bilder online kodieren und dekodieren

Der Encoder ist ein Skalpell für eine Zeichenkette, die Sie einfügen können, kein CDN.

Hängt die Antwort an einer Datei, die der Browser nicht halten sollte, oder an Kryptografie, bleiben Sie in CI oder einem Secret-Manager.

Jeder, der die Zeichenkette lesen kann, kann sie dekodieren. Base64 hat keinen Schlüssel, keine Integritätsprüfung und keine Vertraulichkeit. Ein Token, das im Log undurchsichtig wirkt, ist nach einem einzigen Dekodieren Klartext. Wenn die Bytes geheim bleiben müssen, verschlüsseln Sie sie (oder legen Sie sie nicht in den Payload). Wenn sie authentisch bleiben müssen, signieren Sie sie mit einem HMAC oder einer JWT-Signatur und nicht mit Base64 selbst.

RFC 4648 definiert zwei Alphabete. Standard-Base64 nutzt + und / und behält üblicherweise das =-Padding. URL-sicheres Base64 (JWT, Cookies, Pfade) nutzt - und _ und lässt das Padding in der Regel weg. Die URL-safe-Option von FastMinify führt beide Ersetzungen aus und streicht beim Kodieren das Padding. Beim Dekodieren stellt der URL-safe-Modus das Standardalphabet und das Padding wieder her, während der Standardmodus die Zeichenkette unverändert an atob übergibt: atob toleriert fehlendes Padding, lehnt aber - und _ ab. Eine URL-safe-Zeichenkette bei ausgeschalteter Option ergibt daher einen Fehler wegen ungültiger Eingabe, eine Standard-Zeichenkette bei eingeschalteter Option wird dagegen trotzdem dekodiert, weil nur diese beiden Zeichen ersetzt werden.

Ein kompaktes JWT besteht aus drei Base64URL-Segmenten, die durch Punkte getrennt sind (header.payload.signature). Die Punkte sind kein Base64. Das Base64-Tool dekodiert eine Alphabet-Zeichenkette und kein Token mit Punkten. Die Fehlermeldung der Seite sagt es ausdrücklich: Nur die kodierten Zeichen einfügen, keine Punkte. Bei einem JWT kopieren Sie jeden Teil zwischen den Punkten oder öffnen den JWT-Decoder und lesen Header und Payload in einem Schritt.

Base64 bläht Binärdaten um etwa 33 % auf (3 Bytes werden zu 4 ASCII-Zeichen). Ein JPEG mit 200 KiB wird zu rund 267 KiB CSS. Das Bild lässt sich dann nicht mehr getrennt vom Stylesheet cachen und macht ein Stylesheet schwerer, das ohnehin das Rendern blockiert. Unter HTTP/2 sind zusätzliche Requests günstig, was den Hauptgrund für das Einbetten entfallen lässt. Data-URIs lohnen sich für winzige Icons, die sonst einen Request kosten würden. Sie verlieren bei Hero-Bildern, Produktfotos und allem, das Sie bereits als Datei minifizieren.

Die Bytes ändern sich nicht. Die Schreibweise schon. Standard-Base64 ist das, was E-Mail-MIME und die meisten APIs ausgeben. URL-sicheres Base64 brauchen JWTs, signierte Cookies und Pfadsegmente, damit + und / nicht mit Query-Syntax kollidieren. Eine Data-URI ist Standard-Base64 mit dem Präfix data:<mime>;base64,, damit ein Browser die Zeichenkette als Ressource behandelt.

Drei Werkzeuge, drei Eingaben. Der Text-Encoder wendet UTF-8 und dann Base64 auf eine Zeichenkette an, eingefügt oder aus einer Textdatei gelesen. Er interpretiert ein PNG nicht als Pixel. Der Bildkonverter liest die Dateibytes und prüft den MIME-Typ. PNG, JPEG, GIF, WebP und SVG werden akzeptiert, ein leerer MIME-Typ wird abgelehnt, statt erraten zu werden. Er begrenzt Dateien auf 32 MiB und gibt eine Data-URI oder rohes Base64 aus. Die Vorschau nutzt nur ein img-Element: SVG wird nie als Markup in das DOM eingefügt. Für SVG als CSS, mit Wahl zwischen utf-8 und Base64 und einem eigenen CSS-Ausschnitt, nutzen Sie SVG zu Data-URI im SVG-Hub. Dessen SVG-Eingabe ist auf 512 KiB begrenzt, eine andere Grenze für eine andere Aufgabe.

Entwickler werfen das durcheinander, weil alles eine Zeichenkette „sicherer“ macht. Sie lösen aber unterschiedliche Kollisionen. URL-Encode kodiert reservierte URI-Zeichen prozentual. HTML-Entities maskieren Markup, damit eine Zeichenkette in einem Attribut stehen kann. Ein Hash (SHA-256, HMAC) liefert Integrität oder Authentizität in einer Richtung; dafür gibt es die Hash- und HMAC-Werkzeuge im Kodierungs-Hub, nicht diesen Artikel. Base64 ändert nur, wie Bytes geschrieben werden.

Base64 nimmt 24 Bits (3 Bytes) und schreibt sie als 4 Zeichen aus einem Alphabet mit 64 Symbolen. Deshalb ist die Ausgabe länger: 4/3, also etwa 33 % mehr, plus Padding, wenn die Eingabelänge kein Vielfaches von 3 ist. Dieser Aufschlag ist der Preis für ein Alphabet, das E-Mail, JSON-Strings und CSS übersteht. Das ist das Gegenteil von Minifizierung. Ist der Payload JSON, das Sie über HTTP ausliefern, minifizieren Sie das JSON zuerst und kodieren nur, wenn eine Hüllschicht ASCII verlangt; siehe den JSON-Minifizierungsleitfaden.

Das eingebaute btoa von JavaScript arbeitet mit einem Binärstring (Werte 0–255). Übergeben Sie ihm café, kodiert es stillschweigend das einzelne Latin-1-Byte für é statt der zwei UTF-8-Bytes; bei einem Emoji oder einem CJK-Zeichen wirft es einen Fehler. FastMinify kodiert die UTF-8-Bytes mit TextEncoder und anschließend Base64, nach demselben Vertrag wie Node Buffer.from(text, 'utf8').toString('base64'). Das Dekodieren kehrt das mit TextDecoder um. Emoji und CJK überstehen den Weg. Dekodieren Sie ein Blob, das nie UTF-8-Text war (ein PNG, ein Gzip-Stream), erhalten Sie Ersatzzeichen statt einer Datei. Ein solches Blob gehört zu image-to-base64 oder in einen Hex-Dump, nicht in ein Textfeld.

Ist die Bytelänge kein Vielfaches von 3, hängt Standard-Base64 = oder == an, damit die Länge der Zeichenkette ein Vielfaches von 4 ist. URL-safe-Kontexte (JWT, manche Cookies) lassen dieses Padding weg, weil = ein Trennzeichen in Query-Strings ist. Das URL-safe-Kodieren von FastMinify entfernt es, das URL-safe-Dekodieren setzt es vor atob wieder ein. Das Standard-Dekodieren braucht es nicht, weil atob fehlendes Padding toleriert. Klassische Beispiele aus der RFC: f → Zg==, fo → Zm8=, foo → Zm9v.

Öffnen Sie den Base64-Encoder/Decoder. Fügen Sie den Text ein oder wählen Sie eine Textdatei aus (die Grenze im Browser liegt bei 32 MiB, wie bei den anderen Dateiauswahlen der Website). Wählen Sie Kodieren oder Dekodieren. Lassen Sie die Option URL-sicher Base64 (URL-safe) für MIME, Data-URI-Payloads und die meisten API-Beispiele ausgeschaltet. Schalten Sie sie für JWT-Segmente, signierte Cookie-Werte und alles ein, was in einem Pfad stehen wird. Laden Sie das Beispiel, wenn Sie nur sehen wollen, wie es funktioniert. Alles bleibt im Tab.

Öffnen Sie das Bild-zu-Base64-Tool. Wählen Sie ein Bild (PNG, JPEG, GIF, WebP oder SVG, bis 32 MiB) oder ziehen Sie es auf die Seite. Wählen Sie Data-URI für CSS-url() und img src oder Rohes Base64, um das Ergebnis an ein anderes Werkzeug weiterzugeben. Die Vorschau wird über ein img-Element gerendert, SVG wird nicht als DOM eingebunden. Leere oder nicht unterstützte MIME-Typen werden abgelehnt, weil das Werkzeug nicht rät. Nach einem winzigen Icon können Sie die URI in das CSS einfügen. Nach einem Foto ist das in der Regel nicht ratsam.

Kodierung ist meist nur ein Schritt in einer längeren Fehlersuche. Der Kodierungs-Hub bündelt die Nachbarwerkzeuge.

Lebt die Zeichenkette schon in einem Skript, entspricht der Buffer von Node dem UTF-8-dann-Base64-Pfad von FastMinify. base64url nutzen, wenn der Konsument eine JWT-Bibliothek ist.

Das native Paar btoa / atob ist eine Binärstring-API. Wickeln Sie es mit TextEncoder/TextDecoder, sonst zerstören Sie alles außerhalb von Latin-1. Genau diese Hülle macht das FastMinify-Text-Tool bereits.

Ein lokales PEM, eine Binär-Fixture oder ein CI-Job, der keinen Browser öffnen darf: openssl bleibt das richtige Werkzeug. FastMinify ersetzt keine Pipeline, die Dateien auf dem Datenträger bereits Hashes berechnet oder signiert.

Keine Installation, nichts wird hochgeladen, UTF-8-Text plus ein eigener Bildkonverter mit 32-MiB-Limit und URL-safe-Option. Die Grenzen: Das Text-Tool ist kein Encoder für Binärdateien, HEIC und PDF liegen außerhalb des Bild-Tools, und die JWT-Verifikation ist eine andere Seite. Nutzen Sie es zum Prüfen, Erklären und Aushelfen auf einer Maschine ohne Node, und lassen Sie openssl oder Buffer in der CI.