So funktioniert’s
- 1.Zum Kodieren lass „Bild in Base64“ ausgewählt und zieh ein Bild auf die Seite, füge eins aus der Zwischenablage ein oder klicke auf „Bild auswählen“.
- 2.Kopiere die Variante, die du brauchst: die Data-URI für ein
srcoderurl(), reines Base64 für eine API oder das fertige HTML-Tag oder die CSS-Regel. SVG-Dateien bekommen zusätzlich eine kürzere, URL-kodierte Data-URI. - 3.Zum Dekodieren wechsle zu „Base64 in Bild“ und füge eine Data-URI oder reines Base64 ein. CSS oder HTML, das eine Data-URI enthält, funktioniert ebenfalls.
- 4.Prüfe Vorschau, Format und Größe und klicke dann auf „Herunterladen“, um das Bild mit der richtigen Dateiendung zu speichern.
Was eine Data-URI ist
Eine Data-URI packt eine ganze Datei in eine URL, sodass eine Seite ein Bild ohne separaten Download anzeigen kann. Die Syntax lautet data:[<media type>][;base64],<data>, zum Beispiel data:image/png;base64,iVBORw0KGgo…. Der Medientyp sagt dem Browser, um welche Daten es sich handelt; ;base64 gibt an, dass die Daten Base64-kodiert sind und kein URL-kodierter Text.
Base64 schreibt je 3 Bytes der Datei als 4 einfache ASCII-Zeichen, deshalb ist das Ergebnis etwa ein Drittel größer als das Bild. Gzip und Brotli holen beim Übertragen der Seite einen Teil davon zurück, der Browser muss den vollständigen Text aber trotzdem dekodieren.
Wann sich das Einbetten lohnt und wann es schadet
Einbetten lohnt sich bei sehr kleinen Bildern: Icons, winzigen Hintergründen und Platzhaltern von ein, zwei Kilobyte, bei denen eine separate Anfrage mehr kosten würde als die Bytes selbst. Praktisch ist es auch für HTML-Berichte in einer einzigen Datei, Testdaten sowie APIs und JSON-Dokumente, die ein Bild als Text erwarten.
Bei allem, was größer ist, werden Seiten dadurch meist langsamer. Das Bild lässt sich nicht separat cachen und wird daher mit jeder Seite und jedem Stylesheet, das es enthält, erneut geladen; in CSS verzögert es außerdem das Rendern, weil der Browser auf das ganze Stylesheet wartet. Über HTTP/2 sind zusätzliche Anfragen günstig, daher ist ab ein paar Kilobyte eine normale Bilddatei die bessere Wahl.
E-Mails sind ein Sonderfall: Gmail und Outlook zeigen keine Data-URI-Bilder an. Newsletter sollten Bilder daher verlinken oder als Inline-Anhang (CID) mitschicken.
Eine kürzere Data-URI für SVG
SVG ist Text und braucht deshalb gar kein Base64. Eine URL-kodierte SVG-Data-URI wie data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'… ist meist 15 bis 25 % kürzer, lässt sich besser komprimieren und bleibt in deinem CSS lesbar.
Nur wenige Zeichen müssen maskiert werden: <, > und vor allem # (geschrieben als %23), das die URL sonst beenden würde, etwa in einer Farbe wie fill='%23f00'. Dieses Tool fasst außerdem Leerraum zusammen und verwendet einfache Anführungszeichen, damit die URI ohne weiteres Maskieren in url("…") passt.
Häufige Fragen
Wird mein Bild irgendwo hochgeladen?
Nein. Das Bild wird von deinem Browser auf deinem eigenen Gerät gelesen und kodiert, und eingefügtes Base64 wird ebenfalls dort dekodiert. Nichts wird an nestoo oder sonst jemanden gesendet.
Warum ist die Base64-Version größer als die Bilddatei?
Base64 stellt je 3 Bytes mit 4 Zeichen aus einem Alphabet von 64 Zeichen dar, der Text ist also etwa 33 % größer als die Datei, plus das kurze Präfix data:image/…;base64,. Das ist der Preis dafür, Binärdaten als reinen Text zu speichern.
Wie verwende ich eine Data-URI in HTML, CSS, Markdown oder JSON?
In HTML gehört sie in das src eines Bilds: <img src="data:image/png;base64,…" alt="">. In CSS verwendest du sie in url(): background-image: url("data:…");. In JSON ist sie ein gewöhnlicher String; viele APIs wollen nur den Base64-Teil ohne das Präfix data:. Markdown akzeptiert  grundsätzlich, aber GitHub und viele andere Websites entfernen Data-URI-Bilder, verlinke dort also ein gehostetes Bild.
Wie groß darf das Bild sein?
Das Tool kodiert Bilder bis 20 MB, und Browser können Data-URIs von mehreren Megabyte anzeigen. In der Praxis solltest du eingebettete Bilder auf wenige Kilobyte beschränken: Größere blähen dein HTML oder CSS auf und lassen sich nicht separat cachen.
Wie mache ich aus einer Data-URI wieder eine Bilddatei?
Wechsle zu „Base64 in Bild“ und füge die Data-URI oder das reine Base64 ein. Das Tool erkennt das tatsächliche Format anhand der Daten selbst, zeigt eine Vorschau und speichert die Datei mit der richtigen Endung, auch wenn die URI einen anderen Typ angegeben hat.