Data URI Encoder / Decoder
Understand Data URI Encoder / Decoder
Ein Data-URI trägt den Inhalt einer Datei in der URL selbst, ein Bild, eine Schrift oder ein SVG lässt sich also direkt in HTML oder CSS einbetten, statt abgerufen zu werden.
How it works
Das Format ist data:<mime-type>;base64,<payload> – zum Beispiel data:image/svg+xml;base64,PHN2Zy4uLg==. Eingetippter Text wird als UTF-8 und anschließend als Base64 kodiert; eine auf das Tool gezogene Datei wird als rohe Bytes gelesen, und ihr MIME-Typ stammt aus der Datei selbst. Base64 fügt etwa ein Drittel an Größe hinzu, und das ist der Handel, den Sie gegen eine gesparte HTTP-Anfrage eingehen.
When to use it
- Ein kleines Icon oder SVG in CSS einbetten, damit es mit dem ersten Rendering erscheint statt nach einer zweiten Anfrage.
- Bilder in eine HTML-E-Mail einbetten, wo viele Programme externe Bild-URLs standardmäßig blockieren.
- Eine HTML-Seite aus einer einzigen Datei oder ein Bookmarklet bauen, das ohne Server dahinter funktionieren muss.
- Die Payload aus einer in einem Stylesheet gefundenen data:-URL herausziehen, um zu sehen, was sie tatsächlich enthält.
Watch out for
- Ein Data-URI lässt sich nicht für sich zwischenspeichern. Die Bytes reisen in jeder Kopie des Dokuments mit, das sie referenziert, jenseits von rund 5 KB gewinnt bei wiederholten Besuchen also meist eine externe Datei.
- Das Dekodieren erwartet die Form ;base64,. Ein prozentkodiertes Data-URI – data:image/svg+xml,%3Csvg... – ist völlig gültig und wird hier nicht behandelt.
- Beim Dekodieren wird die Payload als Text dargestellt, ein PNG oder eine WOFF kommt also als unlesbare Zeichen zurück. Bei SVG und anderen Textformaten erhalten Sie den echten Quelltext zurück.
- Content-Security-Policy blockiert data:-URLs, sofern die Direktive sie nicht erlaubt; eine Seite mit img-src 'self' stellt ein eingebettetes Bild also nicht dar. Browser blockieren außerdem die Navigation auf oberster Ebene zu einer data:-URL, Sie können eine also nicht durch Einfügen in die Adresszeile ansehen.
Frequently Asked Questions
Wann sollte ich Data-URIs verwenden?
Data-URIs sparen HTTP-Anfragen für kleine Assets. Gute Einsätze: kleine Icons und SVGs in CSS (url("data:image/svg+xml,...")), eingebettete Bilder in HTML-E-Mails, in denen externe URLs blockiert werden, HTML-Anwendungen aus einer einzigen Datei und das Einbetten von Schriften in CSS ohne eigene Netzwerkanfrage.
Wie viel größer wird eine Datei durch die Base64-Kodierung?
Base64-Kodierung fügt rund 33 % Größe hinzu. Aus einem 30 KB großen PNG werden als Data-URI rund 40 KB. Ab etwa 5 KB machen der Größenzuwachs und die fehlende Möglichkeit, getrennt zwischenzuspeichern, externe Dateien meist effizienter als Data-URIs.
Kann ich Data-URIs für JavaScript-Bundles verwenden?
Nein – Browser blockieren aus Sicherheitsgründen (XSS) in vielen Zusammenhängen die Ausführung von Skripten aus data:-URLs. Data-URIs sind unbedenklich für Bilder, Schriften, Stylesheets und SVGs, die in background-image oder in src-Attributen von Nicht-Skript-Elementen verwendet werden.
How to Use Data URI Encoder / Decoder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.