Kodierung 🔒 Läuft im Browser — keine Daten werden gesendet

Bild in Base64 umwandeln

Machen Sie aus einem Bild eine Base64-Zeichenkette oder eine fertige Data-URI, ohne es irgendwo hochzuladen.

Eingabe

Ausgabe

Anleitung

Ziehen Sie ein Bild auf die Ablagefläche oder klicken Sie darauf, um eine Datei bis 10 MB auszuwählen.
Die Option „Data-URI-Präfix“ ist bereits angekreuzt, die Ausgabe beginnt also mit data:image/…;base64,.
Entfernen Sie den Haken, wenn Sie nur die reine Base64-Zeichenkette brauchen.
Kopieren Sie das Ergebnis oder prüfen Sie anhand der Vorschau, ob es das richtige Bild ist.

Häufige Fragen

Wie verwende ich das Ergebnis in HTML?

Setzen Sie die komplette Data-URI, beginnend mit data:image/, als src-Attribut eines img-Tags ein. Der Browser decodiert sie ohne separaten Request.

Um wie viel wird das Bild größer?

Base64 macht aus je 3 Bytes 4 Zeichen, der Text ist also etwa 33 Prozent größer als die Bilddatei.

Welche Bildtypen funktionieren?

Jede Datei: PNG, JPEG, GIF, WebP, SVG, ICO und andere. Der MIME-Typ in der Data-URI stammt aus der Datei selbst.

Wird das Bild hochgeladen?

Nein. Die Datei wird lokal in Ihrem Browser gelesen und codiert.

Bild online in Base64 umwandeln

Aktualisiert am 29. September 2026 · Von Saman

Ein als Base64 eingebettetes Bild reist innerhalb von Text mit: in einer HTML-E-Mail, einer CSS-Datei, einer JSON-Payload oder einer einzelnen, in sich geschlossenen HTML-Seite. Der Browser liest das Bild direkt aus der Zeichenkette, es gibt also keine zusätzliche Datei zu hosten und keinen zusätzlichen Netzwerk-Request.

Diese Seite öffnet den Base64 Encoder & Decoder im Reiter „Datei“ mit eingeschaltetem Data-URI-Präfix. Das Codieren passiert vollständig in Ihrem Browser.

Wo Sie das Ergebnis einfügen

Ort	Beispiel
HTML-Bild	`<img src="data:image/png;base64,iVBORw0…" alt="Logo">`
CSS-Hintergrund	`background-image: url("data:image/svg+xml;base64,PHN2Zy…");`
JSON-Feld	`{"avatar": "iVBORw0KGgo…"}` (meist ohne Präfix)
Markdown	`![icon](data:image/png;base64,iVBORw0…)`, sofern der Renderer es zulässt

Wann sich das Einbetten lohnt

Kleine Icons und Logos von wenigen Kilobyte, bei denen ein zusätzlicher Request mehr kostet als der Größenzuwachs.
HTML-E-Mails, in denen externe Bilder oft standardmäßig blockiert werden (die Unterstützung für Data-URIs unterscheidet sich je nach E-Mail-Programm, also vorher testen).
In sich geschlossene Dateien wie exportierte Berichte oder Offline-Demos.
APIs, die Bilder nur als Base64 in JSON annehmen.

Wann nicht

Große Fotos wachsen um ein Drittel und lassen sich nicht mehr getrennt von der Seite oder dem Stylesheet cachen, in dem sie stecken – jeder Seitenaufruf lädt sie also erneut. Für alles über etwa 10 bis 20 KB auf einer Website ist eine normale Bilddatei die schnellere Wahl, idealerweise umgewandelt mit PNG in WebP oder JPG in WebP.

SVG: oft besser ohne Base64

SVG ist bereits Text. In CSS können Sie es oft URL-codiert statt als Base64 einbetten, was kleiner ist, zum Beispiel url("data:image/svg+xml,%3Csvg …%3E"). Diese Codierung übernimmt der URL Encoder.

Von Base64 zurück zum Bild

Um das Bild aus einer Zeichenkette zurückzugewinnen, fügen Sie sie in Base64 decodieren ein: Bilder erscheinen als Vorschau und lassen sich mit der richtigen Dateiendung herunterladen.

Passende Anleitungen

Base64 vs. Base64URL: Was sich ändert und wann Sie welche Variante nutzen Base64URL ist Standard-Base64 mit zwei ausgetauschten Zeichen, - für + und _ für /, und meist ohne das =-Padding. Ungültiger Base64-String: Warum das Decodieren scheitert und wie Sie es beheben Ein Base64-Decoder lehnt einen String aus einem von drei Gründen ab: ein Zeichen außerhalb des Alphabets, eine Länge, die nicht stimmen kann, oder Padding an der falschen Stelle.