Bild in Base64 umwandeln

So wandeln Sie ein Bild in Base64 um

1. Ziehen Sie unter Bild → Base64 ein Bild auf die Ablagefläche oder klicken Sie darauf, um eines auszuwählen (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF …).
2. Wählen Sie die Ausgabe: Data-URI (data:image/png;base64,…), Nur Base64, CSS background-image oder HTML--Tag, das auch Breite und Höhe des Bildes enthält.
3. Klicken Sie auf Kopieren oder bei langen Ergebnissen auf Als .txt herunterladen.

Die Zeile unter der Ablagefläche nennt das tatsächliche Format (aus den Bytes der Datei gelesen, nicht aus ihrem Namen), die Abmessungen, die Dateigröße und die Länge der Data-URI.

So wandeln Sie Base64 zurück in ein Bild

1. Fügen Sie unter Base64 → Bild den Text in Base64-Text oder Data-URI ein. Das kann ein reiner Base64-String, eine vollständige Data-URI oder sogar eine ganze CSS-Regel oder ein <img>-Tag sein: Die Data-URI wird darin gefunden. Zeilenumbrüche und Leerzeichen werden ignoriert, und auch URL-sicheres Base64 (mit - und _) funktioniert.
2. Klicken Sie auf Bild dekodieren. Vorschau, Typ, Abmessungen und Größe erscheinen.
3. Klicken Sie auf Bild herunterladen, um es mit der richtigen Dateiendung zu speichern.

Der Typ wird anhand der „Magic Bytes“ geprüft, der Signatur am Anfang jedes Bildformats (zum Beispiel 89 50 4E 47 für PNG oder FF D8 FF für JPEG). Gibt eine Data-URI image/jpeg an, enthält aber ein PNG, weist das Tool darauf hin und verwendet den tatsächlichen Typ. Alles, was kein erkanntes Bild ist, wird abgelehnt; das Limit liegt bei 20 MB Bilddaten.

So funktioniert Base64

Base64 wandelt je 3 Byte einer Datei in 4 druckbare Zeichen aus A–Z, a–z, 0–9, + und / um, mit = als Auffüllung am Ende. Deshalb ist der kodierte Text etwa 33 % größer als die Datei: Aus einem Symbol mit 30 KB werden rund 40 KB Text. Eine Data-URI ergänzt einen kurzen Header, data:<type>;base64,, damit der Browser weiß, wie er sie lesen soll.

Wann sich Bilder als Data-URI lohnen

Data-URIs sind praktisch für:

• kleine Symbole, Logos und Hintergründe in CSS, um eine Anfrage zu sparen;
• HTML-E-Mails und HTML-Dokumente aus einer einzigen Datei, die ohne externe Dateien funktionieren müssen;
• JSON-APIs und Konfigurationsdateien, die nur Text transportieren können.

Für große Fotos eignen sie sich schlecht. Der Text ist ein Drittel größer als die Datei, lässt sich nicht getrennt von der Seite oder dem Stylesheet zwischenspeichern, das ihn enthält, und verzögert die Darstellung. Ab etwa 10 bis 100 KB ist eine normale Bilddatei mit gutem Caching meist im Vorteil, deshalb zeigt das Tool bei Bildern über 100 KB einen Hinweis.

Alles läuft in Ihrem Browser: Bilder und eingefügter Text werden nie hochgeladen.