Base64-Bild-Konverter
Wandeln Sie ein Bild in einen Base64-Daten-URI um, oder fügen Sie eine Base64-Zeichenfolge ein und erhalten Sie ein herunterladbares Bild zurück — alles läuft lokal ab, nichts wird hochgeladen.
245 Aufrufe
Konnte nicht als Bild dekodiert werden — Base64-Text prüfen.
So funktioniert es
Dieses Tool arbeitet in zwei Richtungen. Im Modus Bild → Base64 wählen Sie eine Datei über die native Dateiauswahl des Browsers aus; das Tool liest sie mit der API FileReader.readAsDataURL() ein und erzeugt einen vollständigen Daten-URI — eine Zeichenfolge wie data:image/png;base64,iVBORw0KG... —, die in einem Feld angezeigt wird, während die reine Base64-Nutzlast (ohne Präfix) in einem zweiten Feld erscheint, sodass Sie sich die für Ihren Anwendungsfall passende Form holen können, jeweils mit einem Ein-Klick-Kopierbutton. Im Modus Base64 → Bild fügen Sie entweder einen vollständigen Daten-URI oder nur den reinen Base64-Text in das Textfeld ein; fügen Sie reinen Base64-Text ohne Präfix ein, ergänzt das Tool automatisch den Header data:image/png;base64,, damit der Browser das Bild trotzdem darstellen kann, und zeigt anschließend eine Live-Vorschau über ein <img>-Element mit einem Download-Button, der die decodierten Bytes wieder als echte Bilddatei speichert.
Die Base64-Kodierung stellt Binärdaten mit nur 64 druckbaren ASCII-Zeichen dar (A–Z, a–z, 0–9, + und /), was es ermöglicht, ein von Natur aus binäres Bild in reine Textformate wie HTML, CSS, JSON oder eine URL einzubetten. Der Mechanismus ist fest und mathematisch: Jeweils 3 Bytes (24 Bit) der Originaldatei werden zu genau 4 Base64-Zeichen (4 × 6 Bit), aufgefüllt mit =, wenn die Eingabelänge kein Vielfaches von 3 ist. Dieses Verhältnis von 3 Bytes hinein, 4 Zeichen heraus ist auch der Grund, warum die Base64-Ausgabe immer etwa 33 % größer ist als die ursprünglichen Binärdaten — 4 geteilt durch 3 ergibt rund 1,333 — ein fester mathematischer Mehraufwand, keine Näherung oder Qualitätseinstellung.
Gut zu wissen
Ein Bild als Daten-URI direkt in Ihr HTML oder CSS einzubetten, hat einen echten Vorteil: Es entfällt eine separate HTTP-Anfrage, was für sehr kleine, häufig wiederverwendete Assets wie Icons, kleine Sprites oder ein winziges Logo in einer E-Mail-Vorlage wichtig ist, bei der externe Bilder unter Umständen blockiert werden. Der Kompromiss kehrt sich bei allem Größeren um: Ein Daten-URI kann vom Browser nicht unabhängig zwischengespeichert werden, wie es eine verlinkte .png- oder .jpg-Datei könnte, er vergrößert die Datei, die ihn enthält (HTML/CSS), um dieselben ~33 %, und er blockiert das Rendern dieser Datei, bis der gesamte kodierte Block heruntergeladen wurde. Als Faustregel gilt: Daten-URIs eignen sich gut für Assets unter ein paar Kilobyte und schlecht für Fotos, Hero-Bilder oder alles, was über mehrere Seitenaufrufe hinweg zwischengespeichert werden soll.
Das MIME-Typ-Präfix — der Teil image/png, image/jpeg oder image/webp in data:image/png;base64,... — ist keine Dekoration. Es teilt dem Browser (oder jedem anderen Programm, das die Zeichenfolge liest) mit, an welchen Decoder die nachfolgenden Bytes übergeben werden sollen; ohne dieses Präfix oder mit dem falschen kann eine ansonsten gültige Base64-Nutzlast nicht dargestellt werden oder als völlig falscher Dateityp gerendert werden. Genau deshalb ergänzt dieses Tool automatisch ein PNG-Präfix, wenn Sie reinen Base64-Text ohne Präfix einfügen — ein sinnvoller Standardwert, den Sie aber anpassen sollten, wenn Sie wissen, dass die Originaldatei tatsächlich ein JPEG oder WebP war.
Häufig gestellte Fragen
Warum ist die Base64-Ausgabe immer größer als das Originalbild?
Base64 kodiert jeweils 3 Bytes binärer Eingabe als 4 Textzeichen, sodass die Ausgabe immer etwa 4/3 der Größe der Eingabe entspricht — rund 33 % größer. Das ist eine feste mathematische Eigenschaft der Kodierung (6 Bit Information pro druckbarem Zeichen statt 8), keine Folge einer niedrigen Qualitätseinstellung oder eines ineffizienten Tools.
Wird mein Bild zur Umwandlung auf einen Server hochgeladen?
Nein. Beide Richtungen laufen vollständig in Ihrem Browser ab: FileReader.readAsDataURL() liest die Datei lokal ein, und auch das Zurückdecodieren in ein Bild geschieht lokal. Es wird nichts irgendwohin übertragen.
Wann sollte ich tatsächlich einen Base64-Daten-URI statt einer normalen Bilddatei verwenden?
Das ist sinnvoll bei kleinen, häufig wiederverwendeten Assets — Icons, winzigen UI-Sprites, einem Logo in einer HTML-E-Mail —, bei denen die Ersparnis einer zusätzlichen HTTP-Anfrage die rund 33 % größere Größe aufwiegt. Für Fotos oder jedes Bild, das der Browser über mehrere Seiten hinweg unabhängig zwischenspeichern soll, ist es ungeeignet, da ein eingebetteter Daten-URI jedes Mal erneut heruntergeladen wird, wenn die enthaltende HTML- oder CSS-Datei lädt.
Ich habe eine Base64-Zeichenfolge eingefügt, aber in der Vorschau erscheint nichts — warum?
Zwei häufige Ursachen: Der Zeichenfolge fehlt das MIME-Typ-Präfix (oder es ist falsch) — dieses Tool ergänzt automatisch data:image/png;base64, wenn keines vorhanden ist, was aber nur hilft, wenn die zugrunde liegenden Bytes tatsächlich PNG-Daten sind — oder der Base64-Text selbst wurde abgeschnitten oder beschädigt (zum Beispiel durch Leerzeichen/Zeilenumbrüche, die beim Kopieren aus bestimmten Quellen eingefügt wurden). Prüfen Sie, ob das Präfix zum tatsächlichen Format passt und ob Sie die vollständige Zeichenfolge kopiert haben.
Was ist der Unterschied zwischen den Ausgabefeldern "vollständiger Daten-URI" und "nur Base64"?
Der vollständige Daten-URI (beginnend mit data:image/...;base64,) ist das, was Sie direkt in ein HTML-src-Attribut oder eine CSS-url()-Funktion einfügen, damit der Browser ihn sofort darstellt. Das Feld "nur Base64" entfernt dieses Präfix, was Sie brauchen, wenn ein Programm, eine API oder eine Konfigurationsdatei nur die reine kodierte Nutzlast erwartet und die Typinformation separat selbst anfügt.
Ähnliche Tools
Problem melden
Base64-Bild-Konverter
Kommentare
Noch keine Kommentare — schreiben Sie den ersten!