Data URL: Grafiken einbetten und HTTP-Requests sparen
Jeder HTTP-Request, der ausgeführt wird, erzeugt Traffic. Das ist nicht viel. Werden aber viele kleine Grafiken geladen, zum Beispiel Layoutgrafiken für Links, Listen etc., kann das bei der Gesamtladezeit einer Seite durchaus spürbar sein. Werden alle Grafiken in einer CSS-Datei eingebetettet, löst diese nur einen Request aus.
Besonders bei HTTPS-Request ist ein Geschwindigkeitsgewinn spürbar, da HTTPS einen signifikant höheren Overhead hat, nämlich Informationen, die zusätzlich zu den eigentlichen Daten mit übertragen werden.
Alle aktuellen Browser unterstützen die Möglichkeit der Data URLs. Beim Internet Explorer 8 gab es jedoch noch die Einschränkung, dass eine Data URL kleiner als 32 Kilobyte sein musste. Diese Einschränkung ist bei den Nachfolgeversionen allerdings aufgehoben worden.
Der Nachteil von Data URLs ist, dass eingebettete Grafiken nicht unabhängig vom Dokument gecacht werden können. Bei CSS-Dateien ist das nicht weiter tragisch, da in der Regel alle Seiten einer Webpräsenz auf dieselbe CSS-Datei zugreifen, die dann als solche nur einmal geladen werden muss und in der Regel im Cache verweilt. Anders sieht es aus, wenn eine Grafik in mehreren HTML-Dokumenten eingebettet wird.
Da eingebettete Grafiken Base64-kodierte Daten sind, sind diese um ein Drittel größer als eigenständige Dateien. Daher lohnt sich das Einbetten nur bei kleinen Dateigrößen.
Eingebettete Dateien beginnen jeweils mit der Zeichenfolge „data:“. Es folgen die Angaben zum MIME-Typs und zur Kodierung sowie der Base64-kodierten Daten – alles durch Semikolon beziehungsweise Kommata getrennt:
body {
background-image: url("data:image/png;base64,iVBORw0KG…");
}
Das Beispiel zeigt, wie eine eingebettete Datei in einer CSS-Datei aussieht. Die Base64-kodierte Zeichenkette ist natürlich je nach Größe der Datei deutlich länger.
Wird keine Kodierung angegeben, wird standardmäßig von einem URL-Encoding ausgegangen. Wird kein MIME-Typ angegeben, wird von „text/plain“ ausgegangen.
Mit ein paar Zeilen PHP lassen sich Grafiken einfach mittels Base64 kodieren und in ein Dokument einbetten, zum Beispiel in eine CSS-Datei. Folgende Funktion wandelt eine beliebige Grafik in eine Data URL um:
function dataurl($datei, $mime) {
$data = file_get_contents($datei);
$data = base64_encode($data);
return "data:".$mime.";base64,".$data;
}
In der CSS-Datei, die natürlich von PHP interpretiert werden muss, muss dann lediglich die Funktion mit der Angabe der Datei sowie des MIME-Typs aufgerufen werden:
body {
background-image: url("<? echo dataurl("hintergrund.png", "image/png"); ?>");
}
Theoretisch lässt sich auch eine komplette Website als Data URL kodieren und als Link ausgeben. So lassen sich zum Beispiel kleine Seiten erstellen, die man dann als Lesezeichen abspeichern kann. In dem Lesezeichen ist dann kein gewöhnlicher Link zu einer Seite; vielmehr wird die komplette Seite in dem Lesezeichen gespeichert:
<a href="data:text/html;base64,<? echo base64_encode("<html><head><title>Website</title></head><body>Dies ist eine Website.</body></html>"); ?>">Link</a>
Weitere Anwendungsbeispiele für Data URLs gibt es bei mozilla.org. Unter dataurl.net gibt es außerdem einen Generator, mit dem sich
Nutzt ihr Data URLs? Welche weiteren Einsatzmöglichkeiten kennt ihr?
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team
Das letzte Code-Snippet ist wohl Humbug… es erweckt den Eindruck, die ein paar Zeilen weiter oben erwähnt Funktion „dataurl“ zu verwenden, was aber zu keinem brauchbaren Ergebnis führen würde…
@Stefan: Das letzte Beispiel hat so natürlich wirklich nicht funktioniert. Es ist jetzt korrigiert. Danke für den Hinweis!
Man kann aber wesentlich mehr machen. Javascript. CSS, Videos, Sound etc kann man natürlich so auch einbinden
Aber: Ein Nachteil ist, dass base64 enkodierte Dateien und Quellcode um ein Drittel größer ist als das Original und dementsprechend diese Technik nur begrenzt und richtig eingesetzt werden sollte.
Zudem lohnt es sich den Quellcode zusätzlich vorher zu minimieren und nachträglich gzipped auszuliefern.
Keinen der erwähnten Nachteile hat übrigens SVG.
Mit einer Cache Funktion in die dataurl Funktion wäre das ganze auch noch zusätzlich schön performant ;-)
Welche Browser können denn data:?
@Sascha: Alle gängigen Browser wie Firefox, Opera, Safari und der Internet Explorer unterstützen das.