Wie man Data URIs in der Webentwicklung sinnvoll einsetzt

Data URIs sind eine Technik, die es erlaubt, die Performance einer Website zu erhöhen, indem die Anzahl der HTTP-Anfragen reduziert wird. Dabei werden Bilder und Zeichensätze in reinen Text-Strings gespeichert, die direkt in das HTML-Markup oder in die Stylesheets eingebettet werden können. In diesem Beitrag für das Blog unserer Agentur in Bonn wird erklärt, was Data URIs sind und wann man sie sinnvoll in einem Web-Projekt einsetzen kann – und wann man besser auf diese Technik verzichten sollte.

Die Vorteile von Data URIs

Obwohl das Thema wegen der hohen Geschwindigkeit aktueller Internet-Verbindungen und Endgeräte manchmal vernachlässigt wird, ist eine gute Website-Performance heute sehr wichtig, da man damit verhindert, dass die User wegen eines langsamen Aufbaus noch vor dem vollständigen Laden der Seite abspringen. Dies ist gerade im Hinblick auf den Boom des mobilen Web mit seinen von der Leistung und Bandbreite her eher beschränkten Verbindungen und Endgeräten wichtig. Außerdem bewerten auch Suchmaschinen Websites mit guter Performance besser.

Die sogenannten Data URIs bieten eine Möglichkeit, beliebige binäre Daten in HTML- oder CSS-Code einzubetten – auch Bilder und Zeichensätze. Dabei werden die Daten in einer einfachen ASCII-Zeichenkette kodiert. Die am weitesten verbreitete Kodierung für diesen Zweck nennt sich base64. Die Technik gibt es zwar schon seit mehr als einem Jahrzehnt, aber erst in letzter Zeit hat sie an Popularität gewonnen. Einer der Gründe ist, dass erst seit Kurzem die meisten gebräuchlichen Browser damit kompatibel sind, daneben ist die Fixierung auf Performance im Webdesign ebenfalls noch recht neu.

Die Performance einer Website hängt in entscheidender Weise davon ab, wie viele HTTP-Anfragen an den Server gestellt werden. Jedes Element einer Website – Bilder, Stylesheets, JavaScript-Dateien usw. - wird durch eine HTTP-Anfrage abgerufen. Doch erlauben die meisten Browser nur zwei Anfragen auf einmal, so dass dadurch ein Flaschenhals für die Geschwindigkeit der Seite entsteht. Je mehr Anfragen die Seite also stellt, um so schlechter ist in der Regel die Performance.

Die Data URIs bieten nun die Möglichkeit, alle Daten in eine oder in wenige Seiten zu packen, beispielsweise in eine CSS-Stylesheet. Für alle Daten, die in dieser Weise in eine Seite eingebettet werden, reicht eine einzelne HTTP-Anfrage.

Wie man Bilder und Zeichensätze in Data URIs kodiert

Mit online kostenlos verfügbaren Tools kann ein Bild in eine Data URI umgewandelt werden. Der String eines mit base64 kodierten Bildes verbraucht zwar um etwa ein Drittel mehr Platz als das Bild in seinem ursprünglichen Format. Durch Komprimierung über gzip kann der Unterschied jedoch so klein gehalten werden, dass er kaum noch ins Gewicht fällt.

Nicht nur Bilder, sondern auch Icon-Fonts können mit mittels base64 kodierten Data URIs leicht in eine Stylesheet eingebettet werden und dabei an das eigene Projekt angepasst werden. Dies ist insbesondere dann von Vorteil, wenn man nur wenige Symbole verwendet, die wenig Speicherplatz verbrauchen. Auch hier gibt es Online-Tools, die die Umwandlung einfach vornehmen und oft auch schon einsatzbereiten CSS-Code generieren, den man allerdings an nicht vollständig mit der Technik kompatible Browser wie die älteren Internet-Explorer-Versionen anpassen muss.

Die Symbole können sowohl einzeln als Data Icon oder über neue CSS-Klassen eingebunden werden. Während sich die erste Möglichkeit, bei der die Symbole über Unicode-Referenzen abgerufen werden, eher für kleine Zeichensätze eignet, ist die Erstellung einer eigenen CSS-Klasse für jedes Icon bei einer größeren Anzahl von Icons wegen der besseren Wartbarkeit oft von Vorteil.

Wann sollte man Data URIs einsetzen?

Data URIs haben neben den Vorteilen auch einige Nachteile und sind daher nicht in jedem Fall das Mittel der Wahl.

Zum einen wird ein über eine Data URI kodiertes Bild nicht von Browser im Cache zwischengespeichert. Wird es also auf mehreren Seiten aufgerufen, so muss es jedes Mal erneut auf den Rechner des Endnutzers heruntergeladen werden. Ebenfalls werden die als Data URIs kodierten Bilder mit dem Text am Stück auf das Endgerät heruntergeladen. Der Benutzer sieht also die Seite erst, wenn alle Bilder geladen sind. Handelt es sich bei den base64-Strings um kodierte große Dateien wie etwa Fotos, so kann dadurch gerade bei mobilen Endgeräten der Performance-Gewinn zunichte gemacht werden oder sich die Geschwindigkeit des Seitenaufbaus sogar verschlechtern.

Aus diesen Gründen eignen sich Data URIs besonders bei kleinen Bildelementen wie etwa Icons. In diesem Fall überwiegt der Vorteil des Performance-Gewinns durch die geringere Anzahl von HTTP-Anfragen die Nachteile meist deutlich.

Weiterhin beeinträchtigen die Data-URI-Strings mit ihrer Syntax die Lesbarkeit der Stylesheets und anderer Textdateien. Damit ist die Pflege dieser Dateien und auch die Wartung und der Support für das Projekt oft aufwändiger. Außerdem mindert der Einsatz von base64-kodierten Bildern die Vorteile von Techniken wie Spritesheets: Jedes Mal, wenn eine Änderung an einem Element vorgenommen wird, muss das gesamte Bild neu kodiert werden, was den Aufwand weiter erhöht.

Fazit

Data URIs sind eine interessante neue Entwicklung im Webdesign, sollten auf keinen Fall als Allheilmittel für Performance-Probleme von Websites angesehen werden. Obwohl sie in einigen Fällen Vorteile bieten, so sollte man vor ihrer Benutzung genau analysieren, ob sie sinnvoll sind. Wenn eine Website durch viele HTTP-Anfragen – etwa bei einer Seite mit vielen kleinen Icons – eine schlechte Performance besitzt, so können Data URIs in vielen Fällen Abhilfe schaffen. Wie andere Optimierungs-Techniken auch sollte man sie als eines von vielen Werkzeugen betrachten, dessen Vor- und Nachteile mit denen anderer Tools, wie den durch CSS3 und SVG ermöglichten Verfahren, abgewogen werden sollten.

Unsere Agentur in Bonn ist selbstverständlich auch in Sachen Data URIs auf dem neuesten Stand und kann Sie professionell zum Thema beraten. Wenden Sie sich also an uns, wenn Sie eine Webdesign-Agentur für die Erstellung und Betreuung Ihrer Website benötigen und dabei auch Data URIs als Technik im Auge haben.