MenüNetzwerklösungen, Webprogrammierung, Intranetlösungen, Datenbanken, Anwendungsprogrammierung und Systemsicherheit aus einer Hand in Bad Tölz
Wie man Bilder für den Einsatz in Webseiten optimiert. Und dem Besucher lange Wartezeiten erspart.
 

 Webprogrammierung - Ergonomie und Bildbearbeitung

Sehr sparsam eingesetzt können Bilder, so wie in diesem Beispiel hier, durchaus informativ sein. Nachteilig ist jedoch eine "Nebenwirkung": Die Ladezeit einer Webseite steigt mit Anzahl und Größe der eingebundenen Bilder stark an! Hier ist "Schadensbegrenzung", sprich, konsequentes Optimieren dieser Bilder, von größter Wichtigkeit! Und man kann da eine ganze Menge tun! Doch welches Grafikformat eignet sich am besten? Man hat ja die Qual der Wahl zwischen GIF, PNG und JPG. Und wie soll so eine Optimierung aussehen?
 
Bildformat  Da wäre zunächst mal die Wahl des geeigneten Bildformats. Insbesondere die weit verbreiteten Bildformate PNG und JPG sind in ihrer eigenen Disziplin fast unschlagbar. In der nachfolgenden Tabelle sehen wir genau, wie diese Disziplinen aussehen. Und welche Auswirkungen das auf die Dateigröße hat.
 
Photo: Hohe Farbtiefe,
weiche Farbverläufe
Grafik: geringe Farbtiefe,
einfarbige Flächen
muster-jpg muster-png
GIF: 21.957 Bytes
PNG: 18.903 Bytes
JPG: 6.193 Bytes
GIF: 673 Bytes
PNG: 537 Bytes
JPG: 2.406 Bytes
 
PNG: Farbreduktion Das Grafikformat PNG unterstützt 16,7 Mio Farben. Doch werden soviele verschiedene Farben wirklich benötigt? Bei Grafiken in der Regel nicht, da kommen wir meist mit 16 oder 256 Farben aus. Die Farbpalette sollte also entsprechend angepaßt werden, denn das spart nochmal einiges ein:
 
Grafik: 16,7 Mio Farben (24 Bit) Grafik: 16 Farben (4 Bit)
muster-png muster-png
615 Bytes 537 Bytes
 
PNG: Kompressionsgrad Letztendlich beruht das Prinzip "PNG" auf einer LZW-Kompression. Hier läßt sich, ähnlich wie bei ZIP, der Kompressionsgrad einstellen. Stufe 9 komprimiert am besten. Da PNG ein verlustfreies Kompressionsverfahren verwendet, sollte also immer die Stufe 9 verwendet werden.
 
Grafik: Stufe 1 Grafik: Stufe 9
muster-png muster-png
730 Bytes 524 Bytes
 
PNG: Zusammenfassung Was für ein Unterschied! Schlecht optimierte Bilder sind mehr als doppelt so groß wie gut optimierte. Und das bei gleichem Ergebnis.
 
Grafik: 16,7 Mio Farben, Stufe 1 Grafik: 16 Farben, Stufe 9
muster-png muster-png
1.133 Bytes 524 Bytes
 
JPG: Kompression Im Gegensatz zu PNG benutzt JPG ein völlig anderes Kompressionsverfahren. Dieses ist an die Gegebenheiten des menschlichen Auges angepaßt und außerdem verlustbehaftet. Bilder mit guter Qualität sind entsprechend groß, kleine Dateigrößen muß man sich mit einer entsprechend schlechteren Qualität erkaufen. Beim Komprimieren ist daher viel Erfahrung und Fingerspitzengefühl erforderlich. Und das richtige Werkzeug.
 
Photo: Zu wenig komprimiert Photo: Zu stark komprimiert
muster-jpg muster-jpg
14.391 Bytes 1.024 Bytes
 
JPG: Kompressionsmethode Ein besonderes Finetuning kann man mit der Kompressionsmethode und seinen Parametern vornehmen. Auch das erfordert viel Erfahrung, und nicht jede Methode ist für alles gleich gut. Bei großen, hochauflösenden Bildern eignet sich meist der Parameter "Progressiv". Meist sind die Zwischenschritte 2×2,1×1,1×1 und die DCT-Methode "Fließkommazahlen" von Vorteil. Auf die Bildqualität haben diese Einstellungen keinen Einfluß, jedoch auf die Dateigröße!
 
Progressiv
1×1,1×1,1×1
Ganzzahlen
Nicht-progressiv
2×2,1×1,1×1
Fließkommazahlen
muster-jpg muster-jpg
6.918 Bytes 6.183 Bytes
 
JPG: Zusammenfassung Wie man sieht, kann man besonders bei JPG viel falsch machen. Fehler "kosten" bei diesem Format besonders viel Speicherplatz und Ladezeiten!
 
Zu wenig komprimiert
Progressiv
1×1,1×1,1×1
Ganzzahlen
Richtig komprimiert
Nicht-progressiv
2×2,1×1,1×1
Fließkommazahlen
muster-jpg muster-jpg
24.573 Bytes 6.183 Bytes