Beispiele
HTML
 |
| Der rote Punkt aus dem Beispiel links |
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.
CSS
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;}
JavaScript
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.
Einfügen in HTML oder CSS mit PHP
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.