Daten-URIs: Bilder, Stylesheets, JavaScripts und andere Dateien direkt im HTML-Markup mitsenden

Mit Daten-URIs kann man Dateien direkt in den HTML-Code einbetten und es so theoretisch ermöglichen, eine komplette Webseite mit nur einem einzigen HTTP-Aufruf aufzubauen. Alle zusätzlichen Dateien, wie Bilder, Stylesheets, JavaScripts werden direkt in den HTML-Code eingebettet.

Das ganze funktioniert nach einem einfachen URI-Schema:
data:MIME-Typ;Kodierung,Daten

Im Regelfall werden die Dateien einfach mit Base64 kodiert, und dann der Komplette Textfetzen direkt in das href oder src Attribut geschrieben:

<img src="data:image/png;base64,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" alt="" />

Damit liegt jetzt Beispielsweise ein komplettes PNG-Bild als Textlink vor. Für ein Stylesheet müssten wir einfach vorne data:text/css hinschreiben, für ein JPG data:image/jpg für ein JavaScript data:text/javascript usw.

Mit PHP löst man das umrechnen einer Datei in so eine Daten-URI in einer Zeile:

<img src="data:image/png;base64,<?=base64_encode(file_get_contents('image.png'))?>" alt="" />

Natürlich ist das jetzt nicht immer nützlich. Vor allem bei kleinen Dateien, wie kleinen Grafiken oder Stylsheets hat man einen klaren Vorteil, weil die Daten gleich mit dem HTML-Code kommen. Bei größeren Dateien verlängert sich die Wartezeit des ersten Aufrufs allerdings beträchtlich. Der Vorteil bei vielen einzelnen Dateien ist ja, dass diese gleichzeitig abgerufen werden können. Mit einem klugen Mittelmaß aus Daten-URIs und üblichen Datei-URLs kann man hier aber sicher Vorteile rausbekommen.

Hier gibts eine Beispiel-Seite die komplett mit Daten-URIs aufgebaut ist.