Base64 Bild-Decoder | Bilder Online Dekodieren & Vorschau

Was ist ein Base64-Bilddecoder?

Ein Base64-Bilddecoder ist ein Werkzeug, das eine Base64-codierte Textzeichenfolge wieder in ein Bild umwandelt. Base64 ist eine Möglichkeit, Binärdaten, etwa die Bytes einer Bilddatei, ausschließlich mit 64 einfachen Textzeichen zu schreiben (Buchstaben, Ziffern, +, / und = als Auffüllzeichen). Browser, E-Mails und viele APIs speichern Bilder auf diese Weise, damit ein Bild als einfacher Text statt als separate Datei übertragen werden kann. Der Decoder kehrt diesen Vorgang um: Die Zeichenfolge wird eingefügt, und das ursprüngliche Bild wird angezeigt.

Das Daten-URL-Format

Im Web wird ein Base64-Bild üblicherweise als Daten-URL geschrieben. Das Muster lautet:

Zum Beispiel:

Jeder Teil hat eine bestimmte Funktion:

• data: kennzeichnet die Adresse als Daten-URL und nicht als normale Webadresse.
• image/png ist der MIME-Typ und teilt dem Browser mit, um welche Art von Datei es sich handelt.
• ;base64 gibt an, dass die Daten nach dem Komma Base64-codiert sind.
• Alles nach dem Komma ist das codierte Bild selbst.

Funktionsweise des Decoders

Die Decodierung erfolgt in vier Schritten.

1. Das Werkzeug prüft, ob die Zeichenfolge mit data: beginnt. Eine Daten-URL, die einen anderen Medientyp als ein Bild angibt, etwa data:text/plain, wird sofort abgewiesen, da sie niemals als Bild angezeigt werden kann.
2. Alle Leerzeichen, Tabulatoren und Zeilenumbrüche werden entfernt, da lange Base64-Zeichenfolgen manchmal über mehrere Zeilen verteilt werden. Ein Payload mit Prozentcodierung statt Base64, die RFC 2397 ebenfalls erlaubt, wird unverändert weitergegeben.
3. Der Base64-Text wird wieder in rohe Bytes decodiert.
4. Der Decoder betrachtet die ersten Bytes des Ergebnisses. Jedes gängige Bildformat beginnt mit einer festen Bytefolge, die als Signatur oder „Magic Number“ bezeichnet wird. PNG-Dateien beginnen mit 89 50 4E 47, JPEG-Dateien mit FF D8 FF und so weiter. Der Decoder vergleicht diese Signaturen und kennzeichnet das Bild mit dem erkannten Typ.

Die Bytes haben Vorrang vor der Kennzeichnung. Wenn eine Daten-URL data:image/png angibt, die Bytes aber mit FF D8 FF beginnen, erstellt der Decoder die URL als data:image/jpeg neu, sodass die vom Button „Bild-URL kopieren“ angebotene Zeichenfolge ihren eigenen Inhalt niemals falsch beschreibt.

Wenn die Zeichenfolge kein data:-Präfix hat, behandelt der Decoder sie als rohe Base64-Daten, decodiert sie und liest die Signatur auf dieselbe Weise. Stimmen die Bytes mit keiner bekannten Bildsignatur überein und sehen sie auch nicht wie SVG-Text aus, meldet der Decoder, dass die Zeichenfolge offenbar kein Bild ist. Er rät kein Format und verwendet auch keinen Standardtyp als Ersatz.

SVG wird anders behandelt, da SVG ein Textformat (XML) und kein Binärformat ist und daher keine feste Byte-Signatur besitzt. Der Decoder prüft die ersten 1024 Bytes des decodierten Textes auf ein <svg-Tag, eine XML-Deklaration wie <?xml version="1.0"?>, auf die ein solches Tag folgt, oder auf eine SVG-Dokumenttypdeklaration, auf die ein solches Tag folgt. Ein Byte-Order-Mark ganz am Anfang, das manche Editoren UTF-8-Dateien hinzufügen, wird ignoriert. Da SVG nicht anhand einer Byte-Signatur erkannt werden kann, behält eine Daten-URL, die image/svg+xml angibt, den von ihr angegebenen Typ.

Formel für die Größe von Base64-Bildern

Base64 wandelt jeweils 3 Bytes Binärdaten in 4 Textzeichen um. Die Formel für die codierte Länge lautet:

Die Symbole ⌈ ⌉ bedeuten „auf die nächste ganze Zahl aufrunden“, da Base64 immer mit Gruppen von 4 Zeichen arbeitet und eine unvollständige Gruppe mit =-Zeichen auffüllt.

Bei großen Dateien ergibt das ungefähr eine Vergrößerung um 33 %, da 4 ÷ 3 ≈ 1,33. Bei kleinen Dateien kann die prozentuale Zunahme größer ausfallen, weil das Aufrunden auf die nächste Gruppe von 4 Zeichen stärker ins Gewicht fällt, wenn ursprünglich nur wenige Daten vorhanden sind.

Beispielrechnung

Das obige PNG-Beispiel wird zu 85 Bytes Bilddaten decodiert. Mit der Formel:

Die Base64-Zeichenfolge ist tatsächlich 116 Zeichen lang, was der Berechnung entspricht. Das ist eine Zunahme um 36 % gegenüber den ursprünglichen 85 Bytes (116 ÷ 85 ≈ 1,36), also etwas mehr als die Angabe von 33 %, weil die Datei so klein ist.

Unterstützte Bildformate

Der Decoder liest die Byte-Signatur der decodierten Daten, um das Format zu bestimmen. Er erkennt die folgenden Typen:

So wird ein Base64-Bild decodiert

1. Die Base64-Zeichenfolge wird mit oder ohne data:image/...-Präfix aus HTML, CSS, einer API-Antwort oder einer E-Mail kopiert.
2. Sie wird in das Eingabefeld eingefügt.
3. Das Bild wird kurz nach dem Ende der Eingabe automatisch decodiert oder durch Drücken der Decodierschaltfläche.
4. Das decodierte Bild erscheint im Vorschaubereich. Seine Daten-URL kann mit dem Button „Bild-URL kopieren“ kopiert werden. Das Bild selbst lässt sich speichern, indem man im Vorschaubereich mit der rechten Maustaste darauf klickt und das Speichern des Bildes auswählt, da es im Browser als normales Bildelement dargestellt wird.

Häufige Verwendungen von Base64-Bildern

• Einbettung in HTML, CSS oder JavaScript: Werden die Bilddaten direkt in den Code eingefügt, ist keine separate Dateianforderung nötig.
• E-Mail-Vorlagen: Einige E-Mail-Programme blockieren standardmäßig extern verknüpfte Bilder, ein eingebettetes Base64-Bild wird jedoch weiterhin angezeigt.
• HTML-Werkzeuge in einer einzigen Datei: Eine ganze Seite einschließlich ihrer Bilder kann als eine eigenständige Datei ausgeliefert werden.
• API-Antworten: Ein Bild kann innerhalb einer JSON-Nutzlast übertragen werden, statt einen eigenen Endpunkt zu benötigen.
• CSS-Hintergründe und Symbole: Kleine Symbole werden manchmal direkt als Daten-URL in ein Stylesheet geschrieben.

Vor- und Nachteile von Base64-Bildern

Base64-Codierung ist praktisch, aber nicht kostenlos:

• Der codierte Text ist ungefähr ein Drittel größer als die ursprüngliche Datei.
• Browser können ein eingebettetes Bild nicht auf dieselbe Weise zwischenspeichern wie eine verknüpfte Datei. Daher wird es jedes Mal erneut heruntergeladen, wenn die umgebende Seite oder das Stylesheet geladen wird.
• Der Browser muss den Base64-Text decodieren, bevor er das Bild anzeigen kann, was einen geringen zusätzlichen Rechenaufwand verursacht.
• Wegen der größeren Datenmenge und des fehlenden Caching eignet sich die Base64-Einbettung für kleine Bilder wie Symbole und einfache Logos. Größere Fotos werden meist besser als gewöhnliche Bilddateien bereitgestellt.

Häufig gestellte Fragen

Was ist ein Base64-Bilddecoder?

Es handelt sich um ein Werkzeug, das eine Base64-codierte Textzeichenfolge wieder in ein anzeigbares Bild umwandelt, etwa in eine PNG-, JPEG-, GIF-, WebP-, BMP- oder SVG-Datei.

Wie decodiere ich ein Base64-Bild?

Fügen Sie die Base64-Zeichenfolge mit oder ohne data:image/...-Präfix in den Decoder ein. Er liest und decodiert die Zeichenfolge und zeigt das resultierende Bild an.

Kann eine Base64-Zeichenfolge ohne das Daten-URL-Präfix decodiert werden?

Ja. Der Decoder behandelt sie als rohe Base64-Daten, decodiert die Bytes und liest die ersten Bytes, um anhand ihrer Signatur das Format zu bestimmen, etwa PNG, JPEG, GIF, WebP, BMP oder ICO. SVG wird erkannt, indem im decodierten Text nach einem <svg-Tag gesucht wird. Passt nichts davon, meldet der Decoder, dass die Zeichenfolge offenbar kein Bild ist, statt ein Format zu erraten.

Warum wird mein Base64-Bild nicht decodiert?

Drei Ursachen decken die meisten Fälle ab. Die Zeichenfolge kann Zeichen außerhalb des standardmäßigen Base64-Alphabets enthalten, das aus A–Z, a–z, 0–9, +, / und = besteht; die in einigen Web-Token verwendete Base64url-Variante schreibt stattdessen - und _ und wird nicht akzeptiert. Die Zeichenfolge kann vorzeitig abgeschnitten worden sein, sodass ihre Länge um eins größer als ein Vielfaches von vier ist, was bei keiner gültigen Base64-Zeichenfolge vorkommt. Oder die Bytes gehören einfach nicht zu einem der unterstützten Bildformate. Fehlende =-Auffüllzeichen sind für sich genommen kein Problem; Leerzeichen und Zeilenumbrüche werden vor der Decodierung entfernt.

Ist Base64-Codierung eine Form von Sicherheit oder Verschlüsselung?

Nein. Base64 ist lediglich eine Möglichkeit, Bytes als Text darzustellen; es verbirgt nichts. Jeder kann eine Base64-Zeichenfolge innerhalb weniger Sekunden mit einem kostenlosen Werkzeug decodieren. Daher sollte das Verfahren niemals zum Schutz privater Bilder oder anderer Daten verwendet werden.

Wie viel größer ist eine Base64-Zeichenfolge als das ursprüngliche Bild?

Bei größeren Dateien ist sie ungefähr ein Drittel größer, da jeweils 3 Bytes der ursprünglichen Daten zu 4 Textzeichen werden. Ein 100-KB-Bild wird nach der Codierung ungefähr 133 KB groß. Bei kleinen Bildern kann die prozentuale Zunahme wegen des Aufrundens etwas höher ausfallen.

Historie

Base64 entwickelte sich aus Codierungsverfahren, die in den 1970er- und 1980er-Jahren entstanden, um Binärdaten über Mailsysteme zu übertragen, die nur einfachen Text verarbeiteten. Für E-Mails wurde das Verfahren in RFC 989 (1987) und später in RFC 1421 formalisiert. Die Einbettung von Bildern in Webseiten wurde möglich, nachdem das data:-URL-Schema in RFC 2397 (1998) definiert worden war. Mitte der 2000er-Jahre wurde es verbreiteter, als Entwickler nach Möglichkeiten suchten, die Zahl separater HTTP-Anfragen zu verringern, insbesondere bei langsamen mobilen Verbindungen.

Referenzen

1. RFC 4648: Die Base16-, Base32- und Base64-Datencodierungen
2. RFC 2397: Das „data“-URL-Schema
3. MDN Web Docs: Daten-URLs
4. WHATWG-Standard zur MIME-Erkennung