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
|
|
|
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) |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
24.573 Bytes |
6.183 Bytes |
|
| © 2003-2024 Hohmann-EDV | Stand: 2014-06-12 | Default Browser 0.0 / unknown | Programmierung: Hohmann-EDV |