Base64 in Bild

So funktioniert es

Fügen Sie den Base64-Code in das Eingabefeld ein; sind die Daten ein gültiges Bild, erscheint die Vorschau sofort und die Schaltfläche Herunterladen speichert die Datei mit der erkannten Endung. Sie müssen den Code vorher nicht säubern: Eine CSS-Zeile url('data:image/png;base64,…') samt Anführungszeichen oder ein src-Wert direkt aus dem HTML-Quelltext genügt — das Werkzeug findet die Data-URI selbst und entfernt Zeilenumbrüche und Anführungsreste. Fügen Sie zum Beispiel die 40 KB große Logo-Zeile aus einer E-Mail-Vorlage ein, zeigt die Ergebniszeile eine Übersicht wie "PNG · 40 KB · 200×80 px"; der Dateityp wird aus den ersten Bytes der dekodierten Daten (der Dateisignatur) bestimmt, nicht aus der Angabe am Anfang des Codes. Auch Base64URL, das Alphabet mit Bindestrich und Unterstrich aus JWTs und vielen APIs, wird akzeptiert. Ihre Daten erreichen keinen Server — die Dekodierung läuft vollständig in Ihrem Browser.

Dieses Werkzeug ist auch als base64 in bild umwandeln, base64 bild dekodieren, data uri in bild, base64 zu png online, base64 decoder bild bekannt.

Was ist Base64?

Base64 schreibt Binärdaten mit einem sicheren Alphabet aus 64 Textzeichen; dieses Werkzeug führt die Gegenrichtung aus — das Dekodieren. Dabei schrumpfen je 4 Zeichen wieder auf 3 Bytes, die Datei wird also rund ein Viertel kleiner als ihre kodierte Form. Die =-Zeichen am Ende sind Füllzeichen, die die Bytezahl auf ein Vielfaches von drei runden; gehen sie beim Kopieren verloren, ergänzt dieses Werkzeug sie selbst. Base64 ist keine Verschlüsselung: Wer den Code lesen kann, kann die Daten zurückgewinnen — ein vertrauliches Bild ist durch Base64 nicht geschützt.

Was ist Dateisignatur (Magic Bytes)?

Die Dateisignatur ist die feste Bytefolge ganz am Anfang einer Datei, die ihren Typ verrät: Ein PNG beginnt immer mit den Bytes 89 50 4E 47, ein JPG mit FF D8 FF, ein GIF mit den Buchstaben GIF87a oder GIF89a. Betriebssysteme verlassen sich gern auf die Endung, robuste Software dagegen auf die Signatur — denn Endungen und Data-URI-Angaben werden von Hand geschrieben und können falsch sein. Dieses Werkzeug liest den Typ der dekodierten Daten aus der Signatur: Egal was die Angabe behauptet, die Datei lädt mit der Endung herunter, die zu ihrem tatsächlichen Inhalt passt.

Was ist der Unterschied zwischen Base64 und Base64URL?

Die beiden Alphabete unterscheiden sich in genau zwei Zeichen: Aus + und / des Standard-Base64 werden in Base64URL - und _. Der Grund ist praktisch — + und / haben in Webadressen und Dateinamen Sonderbedeutung, daher werden Daten für URLs oder JWTs mit dem sicheren Zwilling kodiert. Base64URL lässt zudem meist die =-Füllzeichen am Ende weg. Das Standardalphabet begegnet Ihnen in E-Mail-Quelltexten und CSS, das URL-sichere in JWTs und API-Tokens. Dieses Werkzeug akzeptiert beide: Es ersetzt Bindestriche und Unterstriche durch die Standardzeichen, ergänzt die fehlende Füllung und dekodiert dann die Daten.

Der Code lässt sich nicht dekodieren? Die drei häufigsten Ursachen

Die erste Ursache ist unvollständiges Kopieren: Base64 ist eine einzige lange Zeile, und Editoren kopieren oft nur den sichtbaren Teil. Fehlt das Ende, öffnet sich das Bild gar nicht oder ist unten beschädigt — wählen Sie in der Quelle die komplette Zeile aus.

Die zweite Ursache ist eine Alphabet-Verwechslung: JWTs und viele APIs erzeugen Base64URL mit Bindestrich statt + und Unterstrich statt /. Dieses Werkzeug akzeptiert beide Alphabete und ergänzt fehlende =-Füllzeichen selbst. Die dritte Ursache: Die Daten sind schlicht kein Bild. Das Base64 einer PDF oder eines Textes lässt sich fehlerfrei dekodieren, trägt aber keine Bildsignatur — das Werkzeug zeigt dann einen Hinweis mit den unterstützten Formaten.

Woher kommt die Dateiendung? Die Dateisignatur

Die Angabe image/png am Anfang einer Data-URI ist eine Behauptung, und Behauptungen können falsch sein. Statt ihr zu vertrauen, liest dieses Werkzeug die ersten Bytes der dekodierten Daten: Ein PNG beginnt immer mit denselben acht Bytes, ein JPG mit FF D8 FF, ein GIF mit den Buchstaben GIF8.

Die Endung wird aus dieser Signatur gewählt — behauptet die Angabe JPG, tragen die Daten aber eine PNG-Signatur, lädt die Datei als .png herunter. Eine falsch beschriftete Data-URI wird so nie zu einer falsch benannten Datei, die manche Programme nicht öffnen. Erkannt werden PNG, JPG, GIF, WEBP, BMP, ICO, AVIF und SVG.

Häufige Fragen

Muss ich die ganze Data-URI einfügen oder nur den Code?

Beides funktioniert: die komplette Zeile ab data:image/png;base64,… oder nur der reine Code nach dem Komma. CSS-url()-Hüllen, Anführungszeichen und Zeilenumbrüche werden automatisch entfernt.

Welche Bildformate werden erkannt?

PNG, JPG, GIF, WEBP, BMP, ICO, AVIF und SVG. Der Typ wird aus der Dateisignatur der dekodierten Bytes bestimmt, nicht aus der Angabe im Code; ist die Signatur unbekannt, erscheint ein Hinweis mit den unterstützten Formaten.

Werden die eingefügten Daten an einen Server gesendet?

Nein. Die Dekodierung läuft vollständig in Ihrem Browser; weder der Code noch das dekodierte Bild wird irgendwohin übertragen. Auch Daten aus internen Systemen können Sie deshalb gefahrlos einfügen.

Warum schlägt die Dekodierung meines Codes fehl?

Die häufigste Ursache ist eine abgeschnittene Kopie — wählen Sie die gesamte Zeile aus. Base64URL (Bindestriche und Unterstriche) ist kein Problem, auch das wird dekodiert. Sind die Daten kein Bild, wird der Code zwar dekodiert, statt der Vorschau erscheint aber ein Formathinweis.