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.
| Technik | Traffic | Anzahl Dateien | Traffic Request |
|---|---|---|---|
| Bilddatei | 75810 Bytes | 26 | 13184 Bytes |
| Imagemap | 303339 Bytes | 4 | 1863 Bytes |
| Dataurl | 185236 Bytes | 3 | 1375 Bytes |
| CSS Sprite | 67864 Bytes | 4 | 1844 Bytes |
| CSS Dataurl | 54707 Bytes | 3 | 1411 Bytes |
| CSS Bilddatei | 76228 Bytes | 26 | 13025 Bytes |
Nach der Umstellung der Seiten auf HTML5 ergaben sich die folgenden Werte.
| Technik | Traffic | Anzahl Dateien | Traffic Request |
|---|---|---|---|
| Bilddatei | 76939 Bytes | 26 | 14068 Bytes |
| Imagemap | 304668 Bytes | 4 | 1999 Bytes |
| Dataurl | 186644 Bytes | 3 | 1477 Bytes |
| CSS Sprite | 69205 Bytes | 4 | 1936 Bytes |
| CSS Dataurl | 55947 Bytes | 3 | 1513 Bytes |
| CSS Bilddatei | 77401 Bytes | 26 | 13909 Bytes |
Im Juli 2011 fiel mir ein das ich eine weitere Möglichkeit mit dataurl in einer SVG Datei nutzen konnte.
| Technik | Traffic | Anzahl Dateien | Traffic Request |
|---|---|---|---|
| Bilddatei | 78124 Bytes | 28 | 13668 Bytes |
| Imagemap | 305833 Bytes | 6 | 2671 Bytes |
| Dataurl | 187846 Bytes | 5 | 2204 Bytes |
| CSS Sprite | 70368 Bytes | 6 | 2648 Bytes |
| CSS Dataurl | 57040 Bytes | 5 | 2252 Bytes |
| CSS Bilddatei | 78550 Bytes | 28 | 13507 Bytes |
| SVG mit Dataurl | 57285 Bytes | 6 | 2675 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.