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.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
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.