Kodierung
Data URI / Base64-Bild
Kodierung eines Bildes als Data URI (data:image/…;base64,…) zum Einfügen in CSS/HTML sowie Dekodierung eines Data URI oder rohen Base64 zurück in eine Datei — alles direkt im Browser.
Die Bildvorschau erscheint hier.
Ein Data URI bettet den Inhalt einer Datei (meist ein Bild) direkt als Base64-String in HTML oder CSS ein, statt auf eine separate Datei zu verlinken. Das spart eine zusätzliche Netzwerkanfrage, auf Kosten eines größeren Dokuments.
So verwendest du es
- Kodieren: Lade ein Bild hoch — das Tool erzeugt einen fertigen data:image/…;base64,…-String zum Einfügen in src, href oder CSS.
- Dekodieren: Füge einen Data URI oder rohes Base64 ein, um die Originaldatei zum Download zurückzuerhalten.
- Der kopierte String lässt sich direkt in ein HTML-Attribut oder eine CSS-Eigenschaft einfügen, ohne weitere Verarbeitung.
Typische Anwendungsfälle
- Kleine Icons oder Sprites in CSS einbetten, um eine zusätzliche HTTP-Anfrage zu vermeiden.
- E-Mail-Vorlagen erstellen, bei denen externe Bilder vom E-Mail-Client blockiert werden können.
- Ein Bild schnell als eigenständigen String anzeigen, ohne die Datei irgendwohin hochzuladen.
Was du wissen solltest
Base64-Kodierung vergrößert die Daten um etwa 33 % — bei großen Bildern ist ein Data URI meist die schlechtere Wahl gegenüber einer separaten, vom Browser gecachten Datei.
Ein Data URI wird nicht separat vom Dokument gecacht, in das er eingebettet ist — er wird bei jedem Seitenaufruf erneut mit heruntergeladen.
Artikel zu diesem Tool: Data URI: wann Bilder direkt in den Code einbetten
Häufig gestellte Fragen
Wann sollte ich ein Bild als Data URI statt als Datei-Link einbetten?
Data URIs eignen sich für kleine Icons oder Grafiken, die man ohne zusätzliche HTTP-Anfrage direkt in CSS oder HTML einbetten will, etwa für kritisches Above-the-Fold-Styling.
Gibt es Nachteile gegenüber einer normalen Bild-URL?
Ja, ein Data URI vergrößert das umgebende HTML oder CSS um etwa ein Drittel gegenüber der Originaldatei, wird nicht wie eine separate Datei vom Browser gecacht und stößt bei großen Bildern in manchen Browsern und E-Mail-Clients an praktische Größengrenzen.
Wird das ausgewählte Bild irgendwohin hochgeladen?
Nein, Kodierung, Dekodierung und Vorschau laufen vollständig im Browser, das Bild verlässt das Gerät nicht.
Kann ich einen Data URI für SVG ohne Base64 verwenden?
Ja. SVG ist Text (XML), daher genügt statt Base64 das Percent-Encoding der Sonderzeichen: data:image/svg+xml,%3Csvg...%3E. Diese Variante ist kompakter und bleibt direkt in der CSS-Datei bearbeitbar.
Kann ich einen Data URI in ein href- oder background-image-Attribut einfügen?
Ja, ein Data URI funktioniert überall, wo ein Verweis auf eine Ressource erwartet wird – in src, href, background-image in CSS und sogar in @import. Syntax und Größenbeschränkungen sind dieselben wie beim img-Tag.