Data-URLs in Websites – Bilder in einer Website einbetten

Webseiten werden in mehreren Requests vom Server abgeholt. Zuerst kommt die HTML-Seite. In der steht dann, das eine style.css, Java Script und ein Haufen Bilder nachgeladen werden sollen. Jede weitere Datei stellt einen weiteren Request dar. Jedes mal diesen Request neu aufbauen dauert natürlich Zeit – auch wenn Browser mehrere Anfragen parallel steuert (ungefähr 8) dauert es doch einiges an Zeit, bis alle Bilder auf großen Seiten heruntergeladen worden sind.
Um das zu ändern, habe ich einen Weg gesucht, alles in einer einzelnen Datei – also einer einzigen Anfrage an den Server – auszuliefern.
Am idealsten währe wohl das Verfahren bei E-Mails gewesen, das unterstützen Browser jedoch (noch) nicht.

Ich bin dann jedoch über Data-URLs gestolpert. Und möchte ein wenig darüber berichten.

Siehst du einen grünen Hacken, unterstützt dein Browser Data-URLs bereits:

Auszug aus Wikipedia (Stand 22-05-2010):
Die Data-URL ist ein URI-Schema, welches ermöglicht, Daten so im (HTML-)Quelltext einzubetten, als wären es externe Ressourcen. Sie tendiert dazu, einfacher zu sein als andere Einbettungsmethoden, wie MIME mit cid- oder mid-URIs. Data-URLs werden oft als Uniform Resource Locators bezeichnet, obwohl sie keinen externen Inhalt referenzieren. In Wirklichkeit sind sie Uniform Resource Identifier. Die Data-URL wird im RFC 2397 der Internet Engineering Task Force (IETF) definiert.

Der Vorteil: Die Daten liegen schon im HTML-Dokument bereit und müssen vom Browser lediglich Interpretiert werden.

Overhead

Da Dateien in HTML mittels base64 eingebettet werden, und nicht mehr in Binärer Form vorliegen, entsteht ein Overhead von  33% bis 36% (je nachdem wie viele Whitespaces vorhanden sind). Dabei stellt sich die Frage ob ein TCP-Request länger zur Initialisierung braucht als der Overhead, der auch erstmal gesendet werden muss (zusätzlich).

Mehrere Bilder

Verwendet man ein Bild mehrfach auf einer Seite stellt sich das Problem (nicht wie bei dem Prinzip eines Emailanhangs) das in jedem Image-Tag (<img />) der base64-Code wieder angegeben werden muss. Um das zu umgehen, müsste man in CSS eine klasse Definieren, welche das Bild als Hintergrund verwendet und dann im HTML-Code einen DIV-Tag dafür einfügen. Diese Lösung währe zwar nach Standard korrekt zu lösen. Spider, die die Website auf neue Informationen durchsuchen sind aber mit Sicherheit ziemlich verwirrt, da kein eigentliches Bild vorliegt – auch wenn es für das Menschliche Auge den Anschein hat.

Browser

Obwohl die neueste Generation der großen Browser (FireFox, Chrome, Opera, IE) Data-URLs schon unterstützen stellt sich natürlich die Frage, ob es schon Sinn macht, den Programmiertechnischen Aufwand auf sich zu nehmen, um dieser Handvoll Usern einen kaum merklichen Komfort zu bieten. Der InternetExplorer unterstützt zum Beispiel auch nur eine Größe von 32 Kilobyte  pro Data-URL.

Derzeit zeigt sich mir nur eine große Möglichkeit, bei der es Sinn macht, in Zukunft, Data-URLs einzusetzen. Das Anzeigen von Dynamisch generierten Grafiken (Statistiken, Kuchen,…). Dadurch spart man sich in der Summe enorm viel Overhead. Zur Laufzeit bestehen schon Datenbankverbindungen und oft auch schon alles nötige zum Berechnen des Bildes. Bei derzeitigen Methoden wird ein weiteres PHP-Script aufgerufen, welches alles nochmal neu initialisieren muss um dann ein Bild auszuliefern.
Alternativ kann man Data-URLs für Grafiken im Design anzeigen.

Trotz allem möchte ich euch hier kurz zeigen, wie man eine Data-URL generiert.

Sie besteht aus vier Teilen:

• data – Definiert das es sich um eine Datei handelt
• image/typ – Definiert das es sich um ein Bild handelt und um welches Format (png, jpg, gif…)
• base64 – Die Methode mit der die Daten in einem ASCII-Code übermittelt werden da Binärdaten nicht möglich sind
• die eigentlichen Daten (Kryptisch)

Und so sieht das dann aus: data:image/png;base64,DATEI:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ
CAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6
QAAABl0RVh0U29mdHdhcmUAQWRvYmUgS
W1hZ2VSZWFkeXHJZTwAAAKfSURBVDjLpZP
rS1NhHMf9O3bOdmwDCWREIYKEUHsVJBI7m
g3FvCxL09290jZj2EyLMnJexkgpLbPUanNOber
U5taUMnHZUULMvelCtWF0sW/n7MVMEiN64A
sPD8/n83uucQDi/id/DBT4Dolypw/qsz0pTMbj/
WHpiDgsdSUyUmeiPt2+V7SrIM+bSss8ySGdR
4abQQv6lrui6VxsRonrGCS9VEjSQ9E7CtiqdO
Z4UuTqnBHO1X7YXl6Daa4yGq7vWO1D40wV
Dtj4kWQbn94myPGkCDPdSesczE2sCZShwl8
CzcwZ6NiUs6n2nYX99T1cnKqA2EKui6+Twph
A5k4yqMayopU5mANV3lNQTBdCMVUA9VQh
3GuDMHiVcLCS3J4jSLhCGmKCjBEx0xlshjXY
hApfMZRP5CyYD+UkG08+xt+4wLVQZA1tzxth
m2tEfD3JxARH7QkbD1ZuozaggdZbxK5kAIsf5
qGaKMTY2lAU/rH5HW3PLsEwUYy+YCcERm
IjJpDcpzb6l7th9KtQ69fi09ePUej9l7cx2DJbD7
UrG3r3afQHOyCo+V3QQzE35pvQvnAZukk5
zL5qRL59jsKbPzdheXoBZc4saFhBS6AO7V4
zqCpiawuptwQG+UAa7Ct3UT0hh9p9EnXT5V
h6t4C22QaUDh6HwnECOmcO7K+6kW49DK
qS2DrEZCtfuI+9GrNHg4fMHVSO5kE7nAPVkA
xKBxcOzsajpS4Yh4ohUPPWKTUh3PaQEptIO
r6BiJjcZXCwktaAGfrRIpwblqOV3YKdhfXOIvB
LeREWpnd8ynsaSJoyESFphwTtfjN6X1jRO2+
FxWtCWksqBApeiFIR9K6fiTpPiigDoadqCEa
g5YUFKl6Yrciw0VOlhOivv/Ff8wtn0KzlebrUYw
AAAABJRU5ErkJggg==" alt="" title="" />

Hier ein kleines PHP-Script, das ein Bild mit URL-Data zurück liefert – es soll Zeigen,wie ein URI erstellt werden kann:

<?php
    $fp = fopen ('test.jpg', "rb");
    $file = fread ($fp, filesize ('test.jpg'));
    $data = base64_encode($file);
    print "<img src="data:image/jpg;base64,$data" />";
?>