Bild in Base64 umwandeln

Machen Sie aus einem Bild einen Base64-Data-URI für CSS, HTML oder JSON – oder fügen Sie einen Base64-String ein und erhalten Sie die Bilddatei zurück.

Dateien hier ablegen

.jpg, .jpeg, .png, .gif, .webp, .svg, .bmp, .avif, .ico, .txt · bis 10 MB

Dateien auswählen

Bild in Base64Base64 in Bild

Weitere Einstellungen

AusgabeZeilenumbruch alle 76 Zeichen

So wandeln Sie ein Bild in Base64 um

1
Bild ablegen oder Base64-String einfügen
Fügen Sie bis zu zwanzig Bilder zum Codieren hinzu – oder wechseln Sie die Richtung und fügen Sie einen String ein, den Sie schon haben. Eine .txt-Datei mit dem String funktioniert auch.
2
Richtung wählen
Beim Codieren erhalten Sie einen Data-URI oder nur den reinen Base64-Teil. Beim Decodieren erhalten Sie eine Bilddatei mit der richtigen Endung zum Herunterladen.
3
String kopieren oder Datei herunterladen
Kopieren Sie das Ergebnis direkt in Ihr Stylesheet oder speichern Sie das decodierte Bild. Mehrere Bilder kommen als ZIP zurück – mit je einer Textdatei und zusätzlich einer gemeinsamen JSON-Datei.

Was Base64 macht

Base64 komprimiert nichts und wandelt nichts um. Es schreibt dieselben Bytes nur mit 64 Zeichen neu, die das Einfügen in Text unbeschadet überstehen. Aus drei Bytes werden vier Zeichen – deshalb ist das Ergebnis immer etwa ein Drittel größer als die Datei. Es geht nicht um die Größe, sondern um den Ort: Ein Data-URI kann direkt in einem Stylesheet, einem HTML-Attribut oder einem JSON-Feld stehen, also dort, wo ein Link auf eine separate Datei umständlich oder unmöglich wäre.

Data-URI oder reiner Base64-Teil

Ein Data-URI ist der vollständige String, der mit data:image/png;base64, beginnt – genau das erwartet ein Browser in einem CSS-Hintergrund oder in einem img src. Der reine Base64-Teil ist alles nach diesem Komma; ihn erwartet meist ein API-Feld oder eine Datenbankspalte, weil der Typ dort separat gespeichert wird. Beide stammen aus denselben Bytes, Sie können also zwischen ihnen wechseln, ohne etwas neu zu codieren.

Der Typ kommt aus den Bytes

Der MIME-Typ im Data-URI wird aus den ersten zwölf Bytes der Datei gelesen, nicht aus ihrem Namen. Eine PNG-Datei, die jemand in .jpg umbenannt hat, wird deshalb trotzdem zu data:image/png. Das ist wichtig, weil ein Browser einen Data-URI nicht darstellt, wenn der angegebene Typ nicht zum Inhalt passt – und dann sieht die Seite kaputt aus, nicht die Datei. SVG ist die Ausnahme, weil es Text ist: Es wird am öffnenden Tag erkannt statt an einer binären Signatur.

Zurück zur Datei decodieren

Fügen Sie ein, was Sie haben: einen vollständigen Data-URI, den reinen Base64-Teil oder einen String mit Zeilenumbrüchen. Leerzeichen und Umbrüche werden entfernt, und vor dem Decodieren wird das Alphabet geprüft – so scheitert ein abgeschnittener String sofort, statt eine beschädigte Datei zu erzeugen. Die entstandenen Bytes werden mit derselben Signaturtabelle abgeglichen, um die Endung zu bestimmen. Passen sie zu nichts Bekanntem, öffnet sich die Formatliste, und Sie legen fest, was es sein soll.

Nichts wird irgendwohin gesendet

Zum Codieren dient der FileReader des Browsers, zum Decodieren seine eingebaute Funktion atob. Es gibt keine Bibliothek, kein Hochladen und keinen Server. Was Sie in das Feld einfügen, bleibt im Tab – wichtig, wenn der String ein privates Dokument ist und kein Logo.

Häufige Fragen

Warum sollte ich ein Bild in Base64 umwandeln?

Um es direkt einzubetten, statt darauf zu verlinken. Ein kleines Icon direkt im CSS spart eine HTTP-Anfrage, ein Bild in JSON-Daten kommt durch eine API, die nur Text transportiert, und eine E-Mail-Vorlage bringt ihre Grafiken selbst mit, ohne dass externe Verweise blockiert werden.

Wie viel größer wird die Datei?

Etwa 33 bis 37 Prozent. Base64 braucht für je drei Bytes vier Zeichen, dazu kommt ein kurzes Präfix für den Data-URI. Aus einem Foto mit 100 kB wird ein String von etwa 133 kB – deshalb lohnt sich das Einbetten bei Icons und nur selten bei Fotos.

Was ist der Unterschied zwischen einem Data-URI und reinem Base64?

Ein Data-URI ist das Ganze: data:image/png;base64, gefolgt von den eigentlichen Daten. Browser können ihn direkt als Bildquelle verwenden. Reines Base64 enthält nur diese Daten, ohne Angabe des Typs – das erwarten die meisten APIs und Datenbankfelder.

Gibt es in Browsern eine Längengrenze für solche Strings?

Moderne Browser verarbeiten Data-URIs mit mehreren Megabyte in CSS und HTML, aber Editoren, Terminals und Diff-Tools werden lange vorher unbenutzbar. Dieses Tool nimmt Dateien bis 10 MB an, was einen String von etwa 13,3 MB ergibt, und decodiert Strings mit bis zu 14 MB Inhalt.

Wie decodiere ich einen String ohne data:-Präfix?

Fügen Sie ihn ein und lassen Sie den Bildtyp auf automatischer Erkennung. Die decodierten Bytes werden mit derselben Signaturtabelle geprüft wie beim Codieren – eine PNG-Datei wird also unabhängig von einem Präfix an ihrem Header 89 50 4E 47 erkannt. Schlägt die Erkennung fehl, wählen Sie den Typ selbst aus der Liste.

Ist es sicher, fremdes Base64 hier einzufügen?

Der String wird in Bytes decodiert und als Bildvorschau in Ihrem eigenen Tab angezeigt. Er wird nie hochgeladen, nie ausgeführt und nie gespeichert. Decodieren ist reine Rechenarbeit – aber die Bytes, die Sie erhalten, sind nur so vertrauenswürdig wie ihre Quelle. Behandeln Sie ein unerwartetes Ergebnis also so vorsichtig wie jede heruntergeladene Datei.

Warum schlägt das Decodieren manchmal fehl?

Fast immer, weil der String unvollständig ist. Ein abgeschnittener String, eine beim Kopieren aus dem Terminal verlorene Zeile oder eine URL-sichere Variante mit Bindestrich und Unterstrich statt Plus und Schrägstrich fallen alle durch die Prüfung des Alphabets. Meist hilft es, den String noch einmal aus der Originalquelle zu kopieren.