Cacheable pictures, Grafiken und Bilder optimieren und im Browser Cache ablegen, Traffickosten senken
Tutorial 2:
Teil1 Optimierte Grafiken und Bilder
Traffickosten sind ein nicht zu unterschätzendes Thema.
Im Tutorial 1 haben wir uns schon mit der Reduzierung des Traffics durch HTML-Optimierung befasst.
Im folgenden soll nun auf die Optimierung von Bildern und Grafiken in HTML-Seiten eingegangen werden.
Das ist auch gleichzeitig mit der größte Hebel um das Trafficvolumen zu senken und Kosten durch geringeren Traffic zu sparen.
Kaum eine Website kommt heute noch ohne Grafiken und Bilder aus. Dabei werden häufig die Dateiformate .jpg und .gif verwendet.
Beim Einsatz von Grafiken und Bildern fällt hier schon eine wesentliche Entscheidung.
Das GIF-Format
Das GIF-Format sollte man immer einsetzen für Grafiken und Bilder die mit wenigen Farben auskommen.
Das sind in der Regel Logos, Buttons, Navigationselemente oder auch Icons sowie Design-Elemente.
Oft reicht es hier aus ein GIF mit 16-64 Farben zu erstellen.
Diese zeichnen sich durch eine sehr geringe Dateigröße aus.
Ein häufig gemachter Fehler ist es größere einfarbige Flächen als GIF-Grafik einzusetzen.
Dies geschieht meistens beim Slicen (Zerschneiden) einer Website-Layout-Grafik.
Hier sollte man sich die Mühe machen und diese Grafiken durch einen DIV-Tag mit der entsprechenden Hintergrund-Farbe ersetzen.
Ab einer gewissen Breite und Höhe einer Grafik kann es dann auch von Vorteil sein diese nicht im GIF-Format sondern als JPG anzulegen.
Man sollte in jedem Fall mehrere Varianten testen bis man eine optimale Lösung gefunden hat.
Natürlich sollte die Grafik am Ende noch einigermaßen gut aussehen.
Animierte GIF-Grafiken sollte man möglichst nur dort einsetzen wo sie auch sinnvoll sind.
GIF-Grafiken bieten sich eigentlich immer für das Rahmen-Layout also Logo, Navigation Design-Elemente etc. an.
In Teil 2 zeigen wir ihnen wie sie GIF-Grafiken browserseitig cachen lassen können und so ihre Traffic-Kosten senken können.
Das JPG-Format
Das JPG-Format kommt fast immer bei höherwertigen Grafiken und Bildern also Fotos und Foto-Montagen zum Einsatz.
Auch hier sollte man sparsam mit umgehen und auf die Web-Tauglichkeit achten.
Hier gilt mit größer werdenden Ausmaßen potenziert sich auch die Dateigröße und die damit verbundene Ladezeit.
Es gibt eigentlich zwei Fehler die immer wieder gemacht werden.
Der Erste ist das Einbinden von Grafiken und Bildern ohne diese auf die notwendigen Ausmaße zu verkleinern.
Sprich wir haben eine Grafik die 400 Pixel breit und 200 Pixel hoch ist, auf der Website wird diese aber nur als Thumbnail(Vorschau)
in der Größe 40*20 dargestellt. Die Ladezeit und der verbrauchte Traffic entspricht aber immer noch der großen Grafik.
Lösung: vom Original ein Thumbnail erstellen welches den benötigten Ausmaßen entspricht
und somit auch eine wesentlich kleinere Dateigröße hat.
Der zweite Fehler ist die Qualität der JPG-Grafik. Diese sollte web-tauglich sein.
Das heißt die Grafik wird komprimiert und somit die Dateigröße kleiner. Dies geschieht über die Einstellung der Qualität.
Eine Faustregel ist hier eine Einstellung von 50-60% der Originalqualität ohne das es zu sichtbaren Störungen in der Grafik kommt.
Grafiken und Bilder mit hohem Rot-Anteil sollten eher mit einer Qualität von 60% gespeichert werden.
Lösung Photoshop:
Im Menu unter Dati->Für Web speichern->
Die Ersparnis beträgt dort oft weit über 50-75% der Original-Dateigröße abhängig vom Motiv.
