Anleitung
- Geben Sie den Text ein oder wählen Sie die Datei aus, die Sie einbetten möchten.
- Prüfen oder ergänzen Sie den MIME-Typ, etwa image/png oder image/svg+xml, und wählen Sie „Base64“ oder „Prozentkodierung“.
- Kopieren Sie die erzeugte Data-URI in Ihr HTML, CSS oder JSON.
- Um eine vorhandene Data-URI zu untersuchen, wechseln Sie zu „Analysieren“ und fügen sie dort ein. Sie sehen dann MIME-Typ, Zeichensatz, Größe und eine Vorschau und können die eingebettete Datei herunterladen.
Syntax von Data-URIs
Eine Data-URI, definiert in RFC 2397, transportiert eine kleine Datei direkt in der URL selbst:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Der Medientyp teilt dem Browser mit, wie die Daten zu interpretieren sind; fehlt er, wird text/plain;charset=US-ASCII angenommen. Das Flag ;base64 bedeutet, dass der Teil nach dem Komma Base64 ist. Ohne dieses Flag sind die Daten einfacher Text, in dem Sonderzeichen prozentkodiert sind.
Base64 oder Prozentkodierung
Base64 ist die richtige Wahl für Binärdateien wie PNG, JPEG, WebP, Schriftarten und PDFs. Es vergrößert die Daten stets um etwa 33 %. Bei Textformaten ist die Prozentkodierung oft kleiner, da die meisten Zeichen unverändert bleiben und nur wenige, etwa <, >, #, % und doppelte Anführungszeichen, maskiert werden müssen. Damit eignet sie sich gut für SVG-Icons, und das lesbare Ergebnis lässt sich zudem besser mit gzip oder Brotli komprimieren. Jedes Byte von Nicht-ASCII-Text wird allerdings zu drei Zeichen, sodass Base64 bei chinesischem oder kyrillischem Text meist kürzer ist. Probieren Sie im Zweifel beide Optionen aus und behalten Sie das kürzere Ergebnis.
/* Prozentkodiertes SVG in CSS: innen einfache Anführungszeichen, # als %23 geschrieben */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Wann sich das Einbetten lohnt
Eine Data-URI spart eine HTTP-Anfrage, doch die Daten werden Teil des Dokuments, das sie enthält:
- Kein separates Caching. Ein in HTML eingebettetes Bild wird mit jeder Seite erneut heruntergeladen. Ein in ein Stylesheet eingebettetes Bild wird zusammen mit dieser Datei zwischengespeichert, und jede Änderung daran macht das gesamte Stylesheet im Cache ungültig.
- Langsamere erste Darstellung. Große Data-URIs in CSS verzögern das Rendern, da der Browser zuerst das gesamte Stylesheet herunterladen und parsen muss.
- Größenzuschlag. Base64 fügt ein Drittel hinzu, das durch Komprimieren des HTML oder CSS nur teilweise wieder eingespart wird.
Mit HTTP/2 und HTTP/3 sind zusätzliche Anfragen günstig. Betten Sie daher nur kleine Ressourcen von wenigen Kilobyte ein, etwa Icons, winzige Platzhalter oder einen kritischen Hintergrund, und liefern Sie alles andere als normale Dateien aus. Websites mit einer Content Security Policy müssen data: in img-src bzw. font-src erlauben, damit eingebettete Bilder und Schriftarten geladen werden.
Häufig gestellte Fragen
Gibt es eine Größenbeschränkung für Data-URIs?
RFC 2397 legt keine Grenze fest, und moderne Browser akzeptieren Data-URIs von mehreren Megabyte in Bildern und Stylesheets. Große Data-URIs sind trotzdem keine gute Idee: Sie blähen die Seite auf, lassen sich nicht separat cachen und brauchen länger zum Parsen.
Warum öffnet sich eine Data-URI nicht, wenn ich auf einen Link dazu klicke?
Die meisten Browser verhindern zum Schutz vor Phishing, dass Webseiten das Hauptfenster zu einer data:-URL navigieren. Verwenden Sie Data-URIs in Bildern, CSS oder Download-Links, oder fügen Sie die URI hier unter „Analysieren“ ein, um eine Vorschau zu sehen und den Inhalt herunterzuladen.
Wie verwende ich eine Data-URI in HTML und CSS?
<img src="data:image/png;base64,..."> in HTML oder background-image: url("data:image/svg+xml,...") in CSS. Setzen Sie den Wert in CSS in Anführungszeichen, besonders bei prozentkodiertem SVG.Muss ich einen Zeichensatz angeben?
text/plain oder text/html, die Nicht-ASCII-Zeichen enthalten, ja: Fügen Sie ;charset=UTF-8 nach dem Medientyp hinzu, sonst kann der Standardwert US-ASCII diese Zeichen verfälschen. Binäre Typen wie image/png benötigen keinen Zeichensatz.