Bild zu Base64

Base64 verwandelt die Bytes eines Bildes in reinen Text. So lässt sich das Bild direkt in ein HTML-Attribut, eine CSS-Regel oder ein JSON-Feld einbetten, statt als separate Datei zu existieren. Ziehen Sie hier ein PNG-, JPG-, WebP-, BMP-, TIFF- oder AVIF-Bild hinein und Sie erhalten eine fertige Data-URI wie data:image/png;base64,iVBORw0KGgo.... Fügen Sie umgekehrt eine Data-URI in das zweite Feld ein, bekommen Sie das Originalbild zurück. Kodieren und Dekodieren laufen per WebAssembly in Ihrem Browser, das Bild wird nie hochgeladen.

So wandeln Sie ein Bild in Base64 um

1. Bild in das Ablagefeld ziehen, per Klick auswählen oder mehrere Dateien gleichzeitig markieren.
2. Das Tool liest die Dateisignatur, erkennt so das tatsächliche Format (die Dateiendung allein zählt nicht) und baut die Data-URI mit dem passenden MIME-Typ: image/png, image/jpeg, image/webp, image/bmp, image/tiff oder image/avif.
3. Die vollständige Data-URI erscheint im Ausgabefeld, daneben ihre Größe im Vergleich zur Originaldatei. Ein Klick auf das Kopiersymbol legt sie in die Zwischenablage.
4. Bei mehreren Dateien wird die erste angezeigt, und die Schaltfläche Download all (.zip) speichert pro Bild eine .txt-Datei mit der jeweiligen Data-URI.

Die Bildbytes werden unverändert kodiert: keine Skalierung, keine Neukomprimierung, kein Qualitätsverlust. Dekodieren Sie den String, erhalten Sie eine Datei, die mit dem Original identisch ist.

Aufbau einer Data-URI

Eine Data-URI besteht aus drei Teilen: dem Schema data:, dem MIME-Typ mit dem Zusatz ;base64 und nach dem Komma den kodierten Bytes. Base64 verwendet nur 64 unproblematische Zeichen (Groß- und Kleinbuchstaben, Ziffern, + und /, dazu = als Auffüllzeichen). Deshalb lässt sich das Ergebnis überall einfügen, wo Text erlaubt ist. Die Ausgabe dieses Tools ist eine einzige Zeile ohne Umbrüche, direkt nutzbar in HTML, CSS oder JSON.

Beispiele zum Kopieren

• HTML-Bild: <img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Logo">. Behalten Sie width, height und alt bei wie bei jedem normalen Bild.
• CSS-Hintergrund: .icon { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }. Praktisch für kleine dekorative Icons direkt im Stylesheet.
• JSON-Feld: {"avatar": "data:image/webp;base64,UklGR..."}. Üblich bei APIs, die Bilder als Textfeld erwarten. Manche APIs wollen nur den Teil nach dem Komma, dann entfernen Sie das Präfix data:...;base64,.

Wann sich Base64-Bilder lohnen

• Kleine Icons und Logos: Ein Icon mit wenigen Kilobyte direkt in HTML oder CSS spart eine zusätzliche Anfrage, der Mehraufwand bleibt gering.
• Eigenständige Dateien: ein HTML-Bericht, Prototyp, eine Doku-Seite oder Demo, die offline funktionieren soll, ganz ohne Bildordner daneben.
• APIs und Konfiguration: JSON- oder YAML-Payloads, die nur Text akzeptieren, Testdaten oder Datenbankfelder, die Bilder als String speichern.
• E-Mail-Vorlagen: möglich, aber uneinheitlich unterstützt. Mehrere große E-Mail-Clients blockieren oder entfernen Data-URI-Bilder, testen Sie also in den Clients Ihrer Empfänger. Gehostete Bilder oder CID-Anhänge sind meist zuverlässiger.

Wann Sie besser darauf verzichten

Base64 ist rund 33 Prozent größer als die Binärdatei, weil aus je 3 Bytes 4 Zeichen werden. Das Tool zeigt beide Größen, damit Sie den Aufschlag vorher sehen. Fotos, Hero-Grafiken oder alles über einige Dutzend Kilobyte sollten Sie nicht einbetten: Sie blähen HTML oder CSS auf, verzögern das Rendern der ganzen Seite und können vom Browser nicht separat gecacht werden. Ein Bild, das auf vielen Seiten vorkommt, ist als normale Datei effizienter, weil der Browser es nur einmal lädt. Prüfen Sie außerdem Ihre Content Security Policy: Erlaubt img-src kein data:, werden eingebettete Bilder nicht angezeigt.

Für einen kürzeren String komprimieren oder verkleinern Sie das Bild vorher mit dem Bildkompressor oder wandeln es mit dem Bildkonverter in WebP oder AVIF um.

Base64 zurück in ein Bild umwandeln

Fügen Sie eine vollständige Data-URI oder nur den reinen Base64-String in das Dekodierfeld ein und klicken Sie auf Decode to Image. Alles vor dem ersten Komma wird ignoriert, beide Varianten funktionieren also. Das Tool erkennt das Format anhand der dekodierten Bytes, zeigt eine Vorschau mit Format und Größe und bietet den Download mit der richtigen Dateiendung an. Ist der eingefügte String auf mehrere Zeilen umbrochen, entfernen Sie zuerst die Zeilenumbrüche. Ergeben die Daten kein PNG-, JPG-, WebP-, BMP-, TIFF- oder AVIF-Bild, erhalten Sie eine Fehlermeldung statt einer defekten Datei.

Datenschutz: Das Bild bleibt auf Ihrem Gerät

Viele Online-Konverter laden Ihr Bild zum Kodieren auf einen Server. Hier passiert alles im Browser-Tab: Keine Anfrage überträgt das Bild oder den eingefügten String, was Sie im Netzwerk-Tab der Entwicklertools nachprüfen können. Das zählt bei Screenshots von Dashboards, gescannten Dokumenten, unveröffentlichten Entwürfen oder Base64-Strings aus internen APIs und Logs. Es findet keine Übermittlung an Dritte statt, die Daten bleiben unter Ihrer Kontrolle, was auch die Bewertung nach DSGVO vereinfacht. Ein Hinweis noch: Da die Originalbytes erhalten bleiben, stecken auch die EXIF-Metadaten eines Fotos (Kameramodell, GPS-Position) im Base64-String. Entfernen Sie sie vorher mit dem EXIF-Viewer und -Entferner, bevor Sie ein eingebettetes Foto veröffentlichen.

Häufige Fragen

Verschlechtert die Umwandlung in Base64 die Bildqualität?

Nein. Base64 ist eine Kodierung, keine Kompression. Die Bytes werden unverändert übernommen, das Dekodieren liefert exakt dieselbe Datei.

Warum ist der Base64-String größer als das Bild?

Base64 stellt 3 Bytes mit 4 Textzeichen dar. Die Ausgabe ist daher etwa ein Drittel größer als das Original, plus das kurze Präfix data:.

Kann ich SVG oder GIF hier in Base64 umwandeln?

Das Tool akzeptiert PNG, JPG, WebP, BMP, TIFF und AVIF. Ein SVG rastern Sie vorher mit dem SVG-zu-PNG-Konverter, oder Sie kodieren den SVG-Text direkt mit dem Base64-Encoder und -Decoder.

Wie bekomme ich Base64 ohne das Data-URI-Präfix?

Kopieren Sie die Ausgabe und löschen Sie alles bis einschließlich des Kommas nach base64. Übrig bleibt der reine Base64-String.

Wird mein Bild hochgeladen?

Nein. Kodieren und Dekodieren laufen lokal mit WebAssembly. Es wird nichts gesendet, protokolliert oder gespeichert.