Data-URI-Generator

So erstellen Sie eine Data-URI

1. Wählen Sie einen Modus. Aus Text (Standard) kodiert, was Sie eingeben oder einfügen. Aus Datei nimmt eine abgelegte, eingefügte oder ausgewählte Datei beliebigen Typs. Analysieren geht den umgekehrten Weg und zerlegt eine URI.
2. Unter Aus Text legen Sie MIME-Typ (zum Beispiel text/css oder application/json), einen Zeichensatz und die Kodierung fest: Base64 oder URL-kodiert. Unter Aus Datei wird der MIME-Typ aus der Datei übernommen und lässt sich bearbeiten.
3. Wählen Sie das Ausgabeformat: Data-URI, CSS-url(), HTML-<a> mit Dateinamen für den Download oder Markdown. HTML-<img> erscheint bei Bildern, @font-face bei Schriften.
4. Klicken Sie auf Ausgabe kopieren. Datei herunterladen speichert die Nutzdaten selbst, Als .txt speichern den Ausgabetext.

Unter den Schaltflächen zeigt Nutzdaten die Größe der Daten, URI-Länge die Größe des Ergebnisses und Overhead die Differenz in Prozent.

Die Syntax einer Data-URI

Eine Data-URI packt eine ganze Datei in eine URL:

data:[<media type>][;charset=<charset>][;base64],<data>

Ein paar Beispiele:

Das Komma ist Pflicht, auch wenn die Daten leer sind: data:, ist eine gültige, leere URI.

Base64 oder URL-kodiert

Beide Kodierungen ergeben eine gültige URI; sie unterscheiden sich in Größe und Lesbarkeit.

Reiner ASCII-Text ist URL-kodiert kürzer, und Sie können ihn im Quelltext noch lesen. Jedes Nicht-ASCII-Byte kostet drei Zeichen (é ist %C3%A9), Text in anderen Schriften spricht also schnell für Base64. Für Bilder, Schriften, PDFs und andere Binärdateien nehmen Sie Base64; der Generator warnt, wenn Sie für Binärdaten URL-Kodierung wählen.

Die URL-Kodierung ist hier zurückhaltend: Buchstaben, Ziffern und - . _ ~ ! $ * + , ; = : @ / ? bleiben, wie sie sind, alles andere wird maskiert, auch #, %, Anführungszeichen, Klammern und Leerzeichen. Ein rohes # würde die URI beenden, weil Browser es als Beginn eines Fragments lesen. Für SVG gibt es unter SVG in Data-URI eine dritte, kürzere Option.

Wo Data-URIs funktionieren

• Bilder in <img src>, CSS-background-image, <link rel="icon"> und im poster eines Videos.
• Schriften in src von @font-face, praktisch für eine kleine Icon-Schrift. Der Generator baut die Regel für Sie, wenn der MIME-Typ eine Schrift ist.
• Downloads über <a href="data:..." download="report.csv">, für Dateien, die in einer Seite ohne Server erzeugt werden.
• Stylesheets und Skripte, geladen mit <link href> oder <script src>, wenn die Content Security Policy der Seite data: dafür erlaubt.
• Test-Fixtures und JSON-Payloads, die eine kleine Datei inline brauchen.

Sie funktionieren nicht überall. Chrome und Firefox blockieren von Seiten ausgelöste Navigation des ganzen Tabs zu einer data:-URL, ein Link auf data:text/html,... bewirkt beim Klick also nichts. Eine Content Security Policy muss data: in img-src, font-src oder der jeweiligen Direktive aufführen. Viele Webmail-Clients, darunter Gmail, verwerfen Bilder als Data-URI vollständig; siehe Base64 in E-Mails.

Größe und Performance

Base64 macht Binärdaten etwa 33 % größer, und die URI wiederholt sich in jeder Seite oder jedem Stylesheet, das sie enthält, ohne eigenen Cache-Eintrag. Für kleine Assets von wenigen Kilobyte ist das ein guter Tausch, für Fotos ein schlechter. Performance von Data-URIs geht die Zahlen durch. Speziell für Bilder kann Bild in Base64 vor dem Kodieren verkleinern und umwandeln.

Eine Data-URI im Code bauen

URL-kodierter Text in JavaScript:

const uri = "data:text/plain;charset=utf-8," + encodeURIComponent("Prices: 5 € & up");
// data:text/plain;charset=utf-8,Prices%3A%205%20%E2%82%AC%20%26%20up

Base64-JSON in Python:

import base64, json

obj = {"name": "Ada", "langs": ["en", "fr"]}
uri = "data:application/json;base64," + base64.b64encode(json.dumps(obj).encode()).decode()
# data:application/json;base64,eyJuYW1lIjogIkFkYSIsICJsYW5ncyI6IFsiZW4iLCAiZnIiXX0=

Mehr unter Base64 in JavaScript und Base64 in Python. Um eine gefundene Data-URI zu untersuchen, nehmen Sie den Data-URI-Parser.

Häufige Fragen