Kategorie: Linktipps

Achtung: vermutlich war ich hier etwas voreilig mit Behauptungen, mehr dazu in den Kommentaren.

Sergej Müller hat das Einbinden von Bildern in CSS als Data-URL einem Performance-Test unterzogen Recommended Site. Sein Fazit:

Durch die Base64-Kodierung der Bilder hat sich der „Gewicht“ der Gesamtdatei nahezu verdoppelt. Das trägt dazu bei, dass der Server eine deutlich größere Menge an Daten zu übertragen hat – eine kostspielige Prozedur. Erst die GZIP-Komprimierung reduziert die Dateigröße erheblich und kann die Differenz der Ladezeiten auf ein Minimum verringern.

Ebenfalls nimmt der Browser mehr Zeit in Anspruch, um den Base64-Code zu dekodieren. Ein lokaler Vergleich der Dateien hat bestätigt, dass die Ausführung (das Laden entfällt, da lokal) des HTML-Codes mit Data-URLs stets um 30 ms hinterher hing. Bilder als Data-URL: Ein Blick auf die Performance der Technik

Das Base64 die Datenmenge nahezu verdoppelt war mir soweit sogar bewusst (Nachtrag: meistens handelt es sich nur um ein Drittel mehr), weswegen ich von Data-URLs bislang auch Abstand genommen habe. Der Vorteil nur eine Datei laden zu müssen ist laut diesem Test also eher eine Nullnummer, hinzu kommt ja auch noch die Zeit, die Bilddaten zu dekodieren.

Ändert sich dann doch mal eine Grafik muss diese im CSS aktualisiert werden und damit auch die komplette CSS-Datei beim Besucher neu geladen werden – inkl. der anderen Grafiken.