Entwicklung & Design

Data URL: Grafiken einbetten und HTTP-Requests sparen

Statt Grafiken in HTML- und CSS-Dokumenten zu verlinken, kann es manchmal sinnvoll sein, Grafiken als Data URL in Dokumenten einzubetten. Man spart damit HTTP-Requests, da nur noch ein Dokument inklusiver aller Grafiken geladen wird. Gerade beim Laden vieler kleiner Grafikdateien kann dies zu einem kleinen Geschwindigkeitsgewinn führen.

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?

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

9 Kommentare
Stefan
Stefan

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…

Antworten
Denis Potschien

@Stefan: Das letzte Beispiel hat so natürlich wirklich nicht funktioniert. Es ist jetzt korrigiert. Danke für den Hinweis!

Antworten
Daniel Ruf
Daniel Ruf

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.

Antworten
Helen
Helen

Keinen der erwähnten Nachteile hat übrigens SVG.

Antworten
Thomas Zöger | clever+zöger gmbh

Mit einer Cache Funktion in die dataurl Funktion wäre das ganze auch noch zusätzlich schön performant ;-)

Antworten
Sascha
Sascha

Welche Browser können denn data:?

Antworten
Denis Potschien

@Sascha: Alle gängigen Browser wie Firefox, Opera, Safari und der Internet Explorer unterstützen das.

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung