Ein Data URI bettet den Inhalt einer Datei direkt in HTML, CSS oder JS ein – als data:[typ];base64,[daten] – ohne separate HTTP-Anfrage. Neben dem Performance-Aspekt hat das einen Nebeneffekt, der in Deutschland aus Datenschutzsicht relevant ist: Es entfällt eine Netzwerkanfrage an einen (möglicherweise externen) Server, also eine Gelegenheit weniger, bei der IP-Adresse und Zeitpunkt des Zugriffs protokolliert werden könnten.
Weniger Anfragen, weniger Protokollierung durch Dritte
Jedes über eine klassische URL geladene Bild ist eine HTTP-Anfrage, die der Server oder ein eingebundenes CDN mitschneiden kann. Bettet man ein kleines Bild stattdessen als Data URI direkt in die Seite ein, entfällt diese Anfrage vollständig – ein Detail, das bei DSGVO-Prüfungen häufiger auftaucht als man denkt, etwa bei Tracking-Pixeln, die sich als harmlose Icons tarnen.
Vorteile
- Weniger HTTP-Anfragen – nützlich für kleine Icons oder Hintergrundbilder, nebenbei auch weniger Logeinträge bei Dritten.
- Die Datei ist an das Dokument „gebunden" und bricht nicht, wenn sich ein CDN-Pfad ändert.
- Praktisch für Platzhalterbilder, die sofort erscheinen müssen, bevor das eigentliche Bild geladen ist.
Einschränkungen
- Base64 vergrößert die Datenmenge im Vergleich zur Binärdatei um etwa ein Drittel.
- Ein großer Data URI bläht die HTML/CSS-Datei selbst auf und kann nicht separat von der Seite gecacht werden.
- Bei großen oder häufig wiederverwendeten Bildern ist eine separate, cachebare Datei bei wiederholten Besuchen fast immer effizienter.
SVG als Text, nicht als Base64
Anders als Rasterformate ist SVG Text (XML), daher muss es nicht in Base64 kodiert werden: Es genügt, die Sonderzeichen korrekt per Percent-Encoding zu escapen (data:image/svg+xml,%3Csvg...). Diese Variante bleibt kleiner und lässt sich als reiner Text direkt in einer versionierten CSS-Datei nachvollziehbar bearbeiten.