Anzeige
Anzeige
UX & Design
Artikel merken

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.

Von Denis Potschien
2 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
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:

Anzeige
Anzeige
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

Anzeige
Anzeige

Nutzt ihr Data URLs? Welche weiteren Einsatzmöglichkeiten kennt ihr?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
9 Kommentare
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

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

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

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

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

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige