Data URL: Grafiken einbetten und HTTP-Requests sparen
Warum per Data URL Grafiken einbetten?
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.
Wie werden Data URLs eingebettet?
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.
Data URLS mit PHP generieren?
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"); ?>");
}
Komplette Website als Data URL?
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?
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.