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.
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.