Ein Data-URL ist ein URI-Schema, das es ermöglicht, Daten in (HTML-)Quelltext so einzubetten, als wären es externe Ressourcen. Damit können die Daten, beispielsweise für eine Grafik, innerhalb eines HTML-Dokuments direkt im HTML-Quelltext untergebracht werden, statt sie, wie sonst üblich, aus einer Datei anzufordern.
Dies ist tendenziell einfacher als andere Einbettungsmethoden wie MIME mit cid- oder mid-URIs (siehe dazu RFC 2111[1]). Data-URLs werden oft als Uniform Resource Locators bezeichnet, obwohl sie keinen externen Inhalt referenzieren. In Wirklichkeit sind sie Uniform Resource Identifiers. Die Data-URL wird im RFC 2397[2] der Internet Engineering Task Force (IETF) definiert.
cid
mid
Obwohl die IETF die Data-URL-Spezifikation 1998 veröffentlichte,[2] wurde diese niemals formell zum Standard erhoben.[3] Die Spezifikation von HTML 4.01 (Dezember 1999) verweist jedoch auf die Definition des Data-URL,[4] und die meisten aktuellen Webbrowser unterstützen Data-URLs.
Aktuell unterstützen folgende Webbrowser Data-URLs:
<img>
data:[<MIME-Typ>][;charset=<Zeichensatz>][;base64],<Daten>
Die Kodierung wird durch ;base64 gekennzeichnet. Wenn vorhanden, bedeutet das, dass die nachfolgenden Daten Base64-kodiert sind. Anderenfalls, bei Fehlen des base64-Parameters, werden die Daten durch URL-Encoding kodiert. Wenn die Angabe des MIME-Typs fehlt, wird als MIME-Typ text/plain;charset=US-ASCII angenommen. Bei abweichendem Zeichensatz kann als Abkürzung der MIME-Typ bei Plain text weggelassen, aber der Zeichensatz-Parameter benutzt werden.
;base64
base64
text/plain;charset=US-ASCII
multipart/alternative
message/rfc822
Content-Encoding
Ein HTML-Fragment, welches das Bild eines kleinen roten Punktes einbindet:
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAXUlEQVQY073M vQ2CUADE8R90tOzgFkzgMg7gLs7BCDYmhD0sTV7F2Vi8EF5nuOpyH3/+rW4f hMvPDh3r4Stcwxxe4dbEh3co4ROedddXowmlyrYwtoj3sIRHc3S+vgySGhd7 StmKAAAAAElFTkSuQmCC" alt="Roter Punkt" />
Wie oben gezeigt, kann die Data-URL Whitespace zur besseren Lesbarkeit enthalten. Der geneigte Leser kann den zwischen den Gänsefüßchen stehenden Text ausschneiden und in die Adresszeile eines unterstützenden Browsers eingeben.
Eine CSS-Regel, welche ein Hintergrundbild einbindet:
ul.checklist li.complete { margin-left: 20px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') top left no-repeat;}
Ein JavaScript-Beispiel, welches ein neues, eingebettetes Fenster öffnet, zum Beispiel für eine Fußnote:
window.open('data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Cht'+ 'ml%20lang%3D%22en%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2F'+ 'title%3E%3C%2Fhead%3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0'+ 'A%3C%2Fhtml%3E%0A%0D%0A','_blank','height=300,width=400');
Dieses Beispiel funktioniert nicht im Internet Explorer 8. Seine Sicherheitseinstellungen verbieten navigierbare Dateitypen in Data-URLs.[5]
Weil Base64-kodierte Data-URLs nicht menschenlesbar sind, könnte ein Webseitenersteller kodierte Daten vorzugsweise mit einer Skriptsprache wie PHP einfügen. Das hat den Vorteil, dass bei einer Änderung der eingebundenen Datei der HTML-Quelltext nicht geändert werden muss sowie binäre Daten vom Text getrennt werden. Der Nachteil ist eine höhere Belastung der Server-CPU, wenn kein serverseitiger Cache benutzt wird.
<?php function data_uri($file, $mime) { $contents = file_get_contents($file); $base64 = base64_encode($contents); return ('data:' . $mime . ';base64,' . $base64); } ?> <img src="<?php echo data_uri('elephant.png','image/png'); ?>" alt="Ein Elefant" />
Die oben abgebildete Funktion kann auch auf CSS-Daten angewendet werden:
<?php header('Content-type: text/css');?> div.menu { background-image:url('<?php echo data_uri('menu_background.png','image/png'); ?>'); }
Client- oder serverseitige Funktionen wie Conditional Comments oder User-Agent-Abfragen können benutzt werden, um alternative URLs für ältere Browser wie den Internet Explorer bis Version 7 anzubieten.
