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 meist als Data-URL geschrieben. Das URL-Schema data: wurde 1998 definiert. 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 besagt, dass die Daten nach dem Komma Base64-codiert sind. Die Angabe ist optional. Fehlt sie, sind die Daten einfacher Text oder prozentcodierter Text.
• 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. Ist das der Fall, liest es den MIME-Typ aus diesem Präfix.
2. Es entfernt alle Leerzeichen, Tabulatoren und Zeilenumbrüche, da lange Base64-Zeichenfolgen manchmal auf mehrere Zeilen umbrochen sind. Dies folgt der Regel zur nachsichtigen Base64-Decodierung, die Browser verwenden und deren erster Schritt das Entfernen aller Leerzeichen ist.
3. Der Base64-Text wird wieder in rohe Bytes decodiert.
4. Es betrachtet die ersten Bytes des Ergebnisses. Jedes gängige Bildformat beginnt mit einer festen Bytefolge, die Signatur oder „Magic Number“ genannt wird. PNG-Dateien beginnen mit 89 50 4E 47, JPEG-Dateien mit FF D8 FF und so weiter. Der Decoder verwendet die Tabelle der Bildsignaturen aus dem WHATWG-MIME-Sniffing-Standard. Er gleicht diese Signaturen ab, um den Bildtyp zu bestätigen und bei Bedarf zu korrigieren.

Eine data:-URL, deren Typ nicht image/... lautet, wird abgelehnt, da es sich nicht um ein Bild handelt. Eine data:image/...-URL ohne ;base64 wird unverändert an den Browser weitergegeben.

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, weil SVG ein Textformat (XML) und kein Binärformat ist und daher keine feste Byte-Signatur hat. Der Decoder prüft stattdessen, ob der decodierte Text mit einem <svg-Tag beginnt oder mit einer XML-Deklaration, die ein solches Tag enthält.

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 ist das Ergebnis etwa ein Drittel größer als das Original, da 4 ÷ 3 ≈ 1,33 ist. Bei kleinen Dateien kann der prozentuale Anstieg größer ausfallen, weil das Aufrunden auf die nächste Gruppe von 4 Zeichen stärker ins Gewicht fällt, wenn nur wenige Daten vorhanden sind.

Durchgerechnetes Beispiel

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 Cachings eignet sich das Einbetten per Base64 am besten für kleine Bilder wie Symbole oder einfache Logos. Größere Fotos werden meist besser als gewöhnliche Bilddateien ausgeliefert.

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?

Die häufigsten Ursachen sind eine Zeichenfolge, die mittendrin abgeschnitten wurde, oder zusätzliche Zeichen, die nicht zum Base64-Alphabet gehören. Auch die URL-sichere Variante, die - und _ statt + und / verwendet, wird abgelehnt. Fehlendes Auffüllen mit = am Ende ist meist kein Problem. Meist hilft es, die gesamte Zeichenfolge zu kopieren, einschließlich ihres Präfixes data:image/..., falls vorhanden.

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 stammt aus der E-Mail, die einst nur reinen Text übertrug. Eine Spezifikation für Privacy-Enhanced Mail von 1987 beschrieb, jeweils 3 Bytes in 4 druckbare Zeichen aus einem Zeichensatz mit 64 Zeichen umzuwandeln. Das data:-URL-Schema von 1998 machte es später möglich, Base64-Bilder direkt in Webseiten einzubetten. Die aktuelle Definition von Base64 ist RFC 4648 (2006).

Referenzen

1. IETF. RFC 4648: The Base16, Base32, and Base64 Data Encodings. RFC 4648 – 3 Bytes werden zu 4 Zeichen; Auffüllen mit =.
2. IETF. RFC 2397: The "data" URL scheme. RFC 2397 – Syntax der Data-URL; ;base64 ist optional; veröffentlicht 1998.
3. WHATWG. Infra Standard. Nachsichtige Base64-Decodierung – Entfernen von Leerzeichen; Behandlung des Auffüllens.
4. WHATWG. MIME Sniffing Standard. Abgleich eines Bildtypmusters – Byte-Signaturen von Bildern.
5. MDN Web Docs. Base64. Base64-Glossareintrag – Die codierte Ausgabe ist etwa ein Drittel größer.
6. IETF. RFC 989: Privacy Enhancement for Internet Electronic Mail, Part I. RFC 989 – E-Mail-Codierung aus dem Jahr 1987: 3 Bytes werden zu 4 druckbaren Zeichen.