joerghuelsermann.de Bildtechniken

Bildtechniken

Für diese Teste von Techniken zur Darstellung von Bilder auf einer Webseite habe ich eine Seite gewählt, auf welcher viele kleine Graphiken auch mehrmals wiederholt werden. Es werden jeweils 3 Techniken verwendet wo Bilder im Vordergrund oder im Hintergrund dargestellt werden. Grundsätzlich wollte ich feststellen welche Methoden möglich sind und dabei Vorteile und Nachteile erkennen.

Auswertung

Die folgenden Seiten wurden auch mit Page Speed und Yslow ausgewertet. Während Pagespeed für die Seiten Werte von 99 bis 100 vergab hat Yslow für die beiden Varianten mit der erhöhten Anzahl von Dateien nicht mindestens einen Wert von 97 angegeben. Zumindest erkennt man deutlich das zusätzliche Requests sich bei Yslow negativ auswirken.

Die folgenden Werte stammen von dem Traffic Scanner. Mit diesem Tool kann man die Unterschiede meiner Ansicht nach besser erkennen.

Vergleich der unterschiedlichen Bildtechniken
TechnikTrafficAnzahl DateienTraffic Request
Bilddatei75810 Bytes2613184 Bytes
Imagemap303339 Bytes41863 Bytes
Dataurl185236 Bytes31375 Bytes
CSS Sprite67864 Bytes41844 Bytes
CSS Dataurl54707 Bytes31411 Bytes
CSS Bilddatei76228 Bytes2613025 Bytes

Nach der Umstellung der Seiten auf HTML5 ergaben sich die folgenden Werte.

Werte der unterschiedlichen Bildtechniken HTML5
TechnikTrafficAnzahl DateienTraffic Request
Bilddatei76939 Bytes2614068 Bytes
Imagemap304668 Bytes41999 Bytes
Dataurl186644 Bytes31477 Bytes
CSS Sprite69205 Bytes41936 Bytes
CSS Dataurl55947 Bytes31513 Bytes
CSS Bilddatei77401 Bytes2613909 Bytes

Im Juli 2011 fiel mir ein das ich eine weitere Möglichkeit mit dataurl in einer SVG Datei nutzen konnte.

Werte der unterschiedlichen Bildtechniken HTML5 Juli 2011
TechnikTrafficAnzahl DateienTraffic Request
Bilddatei78124 Bytes2813668 Bytes
Imagemap305833 Bytes62671 Bytes
Dataurl187846 Bytes52204 Bytes
CSS Sprite70368 Bytes62648 Bytes
CSS Dataurl57040 Bytes52252 Bytes
CSS Bilddatei78550 Bytes2813507 Bytes
SVG mit Dataurl57285 Bytes62675 Bytes

Bilder im Hintergrund

Bei den 3 letzten Varianten in der Tabelle, wo die Bilder im Hintergrund dargestellt werden erkennt man eine deutliche Reduzierung des Traffic wobei sich diese Methoden vom Aubau her nicht so stark wie die 3 Varianten die eine Darstellung im Vordergrund vornehmen unterscheiden. Die Vorteile von Dataurl und CSS Sprites gegenüber der Verwendung von einzelnen Bildern sind zu erkennen. Alle dieser Hintergrundtechniken würde ich aber nur bei Bilder anwenden die zum Design einer Seite beitragen was in diesem Fall des Druckbogen nicht zutrifft. Diese drei Techniken sind über Conditional Comments steuerbar. Die Frage ist ob es sich lohnt diesen Aufwand zur Trafficreduzierung zu betreiben und dabei alle Browserversionen zu unterstützen.

Bilder im Vordergrund

Bei diesem nicht wirklich passenden Beispiel der Nachstellung eines Druckbogens ist die Anwendung einer Imagemap nicht unbedingt die beste Wahl. Abgesehen hat diese Variante den Vorteil das die gewünschte Darstellung unabhängig von der Fenstergröße im Browser erreicht wird. Eine Imagemap wird unter XHTML 1.1 von den Browser her nicht einwandfrei unterstützt, ausser man möchte eine nicht valide Seite erstellen. Das trifft in diesem Fall auch für die Inline Images zu die für jeden erneuten Aufruf nochmal in den HTML Code eingebunden werden. Wenn man diese Inline Images verwendet muss man auch bedenken das nicht alle Browserversionen diese auch darstellen können. Eine Browserweiche nur für die Reduktion von Requests dürfte an dieser Stelle auch nicht die geschickteste Wahl sein. Für die Zukunft aber betrachtet dürfte diese Technik Vorteile haben. Die meisten Vorteile sollten sich durch die SVG Datei in Kombination mit dataurl ergeben. Geringer Traffic und Requests deuten darauf hin. Negativ ist daran das ältere Browserversionen diese Bildtechnik nicht unterstützen.