201021Jan

Website-Optimierung: Grafiken richtig abspeichern

Gutes Webdesign ist visuell ansprechend und weist individuelle Stilelemente auf, die in der Regel durch Bilder hergestellt werden. Mit Bildern sind die Grafiken gemeint, die zum Design gehören (Assets). Dazu zählen beispielsweise Farbverläufe, Muster, Navigationen oder Schaltflächen, welche dem Stil des restlichen Designs entsprechen. Die Grafiken sollten als JPG- oder PNG-Bilder abgespeichert und in eine Website per CSS eingebettet werden. Zur Reduzierung der Serveranfragen (Requests) können CSS-Sprites verwendet werden.
Grafische Webdesigns und -layouts entstehen zum Großteil in Programmen wie Adobe Photoshop oder Adobe Fireworks — beide Anwendungen bieten etliche Einstellungen für das Exportieren von Grafikdateien für das Web.

Photoshop - Für Web und Geräte speichern...

Man sollte in jedem Fall von diesen Möglichkeiten Gebrauch machen und mit den verschiedenen Optionen experimentieren. In diesem Workshop will ich auf die wichtigsten Punkte eingehen.

Formate
Die Wahl des Dateiformats, in welchem Website-Grafiken letztendlich abgespeichert werden, hängt vom Inhalt des Bildes ab. Jedes Format hat spezifische Vor- und Nachteile, die man beim Exportieren bedenken und testen sollte. Im Endeffekt sollte die Entscheidung auf JPG- oder PNG-Grafiken fallen. Das GIF-Format könnte man langsam als obsolet betrachten, da PNG-Bilder die gleichen Optionen (8-Bit) bieten und zudem kleiner in ihrer Dateigröße sind. Das Zeitalter der GIF-Animationen dürfte sich aufgrund von JavaScript- und Flash-Animationen dem Ende zuneigen, zumal die Dateigröße der animierten Bildfolgen oft sehr groß ausfällt.
Hier eine kleine Tabelle, in der die Eigenschaften der beiden Grafikformate aufgelistet sind.

  • JPG PNG
  • 16,7 Millionen Farben (24-Bit) 8-Bit, 24-Bit, 32-Bit (Alpha-Kanal)
  • Verlustbehaftet Verlustfrei oder verlustbehaftet
  • Progressiv Interlacing
  • Komprimierung Farbreduktion, Dithering (8-Bit)
  • Keine Transparenz Transparenz, Alpha-Kanal

Die Einsatzgebiete der Formate lassen sich nicht verallgemeinern, da es immer abhängig vom Bildmotiv ist. Man könnte aber im Hinterkopf behalten, dass JPG-Bilder besser für Photos und Farbverläufe geeignet sind, während PNG-Grafiken (8-Bit) für einfarbige Flächen, harte Kanten und Texte verwendet werden sollten.
PNG-Bilder mit einer Farbtiefe von 8-Bit können in allen gängigen Browsern (auch Internet Explorer 6) dargestellt werden, während für die Verwendung von 32-Bit-PNGs in Internet Explorer 6 ein PNG-Fix notwendig ist. Hierfür gibt es mehrere Skripte, die man abhängig vom Einsatzzweck (Hintergrundbild oder einfaches Bild) testen sollte.

Zudem sollte bei dem Exportieren von transparenten PNG-Grafiken mit Adobe Photoshop bis Version CS2 beachtet werden, dass der Gamma-Wert für Mac OS X entfernt werden muss, um Darstellungsfehler zu vermeiden.

JPG-Komprimierung
Die Kompression beim JPG-Format erfolgt durch mehrere Schritte und kann in den genannten Grafikprogrammen eingestellt werden. Bei Adobe Photoshop ist zu beachten, dass JPG-Grafiken stets mit dem Dialog "Für Web und Geräte speichern…" exportiert werden sollten, der über das "Datei"-Menü erreichbar ist. Mit dem gewöhnlichen "Speichern unter…"-Befehl werden programmspezifische Informationen in der Datei gespeichert, welche die Dateigröße beeinflussen. Bei Adobe Fireworks muss der Menüpunkt "Exportvorschau…" gewählt werden, um Einstellungen an dem Ausgabeformat vornehmen zu können.
Typische Artefakte, wie sie in stark komprimierten JPG-Bildern zu finden sind, zeichnen sich durch Unschärfe und Blockbildung aus. Unabhängig vom Bildmotiv sollten Grafiken im JPG-Format mit einer Qualitätsstufe abgespeichert werden, die sich zwischen 65 und 90 befindet. Details oberhalb dieses Bereichs sind für das menschliche Auge nicht oder nur kaum sichtbar.

Bildoptimierung - JPG-Komprimierung

In Photoshop und Fireworks gibt es die Einstellungsmöglichkeit "Weichzeichnen" bzw. "Glätten", mit der sich die Dateigröße noch einmal verringern lässt. Allerdings sollte man diese Option vorsichtig anwenden, da weitere Bilddetails verloren gehen.

Farbreduktion bei PNG-Grafiken mit 8-Bit
Während PNG-Grafiken mit 24-Bit verlustfrei gespeichert werden und lediglich für echte Alpha-Transparenz eingesetzt werden sollten (also 32-Bit), dürften 8-Bit-PNGs mit maximal 256 Farben häufiger Verwendung finden — sie eignen sich für kleinere Grafiken oder einfarbe Bildmotive mit harten Kanten. Neben der manuellen Reduzierung der Farben (per Eingabe) lässt sich noch der Algorithmus wählen, mit dem bei PNG- und GIF-Bildern Farbabstufungen reduziert werden. Die Farbreduktionsalgorithmen oder Paletten tragen die Bezeichnungen "perzeptiv", "selektiv" und "adaptiv" (in Fireworks weichen diese Definitionen zum Teil ab). Die technischen Hintergründe der Berechnungsmethoden sollen an dieser Stelle einmal dahingestellt sein, da man sich beim Export auf das optische Resultat stützen kann. Von den Möglichkeiten, Bilder in Graustufen oder eigenen Paletten abzuspeichern, sollte man nur in Sonderfällen Gebrauch machen.

Bildoptimierung - Farbreduktionsalgorithmen

Als Motiv wurde in diesem Beispiel bewusst ein Farbverlauf gewählt, um die Unterschiede zu demonstrieren.

Dithering
Schließlich gibt es auch für 8-Bit-PNGs eine Technik, die es erlaubt, die Komprimierung anzupassen. Beim "Dithering" lässt sich das Muster einstellen, mit dem die Pixel verteilt werden, um Speicherplatz zu sparen und das Auge zu täuschen. Die Techniken "Diffusion", "Muster" oder "Störungsfilter" ergeben unterschiedliche Resultate. Lediglich die Methode "Diffusion" bietet die Möglichkeit, die Stärke des Ditherings einzustellen.

Bildoptimierung - Dithering

Zum Abschluss sei noch erwähnt, dass es im Web diverse Tools gibt, mit denen sich die Dateigröße von PNG-Grafiken reduzieren lässt. Dazu zählt beispielsweise der Dienst Smush.it von Yahoo!, der auch in YSlow empfohlen wird.
Weiterhin gibt es die Software "pngquant", mit der sich 32-Bit-PNGs (RGB mit Alpha) in 8-Bit-PNGs mit echter Transparenz konvertieren lassen. Jedem Pixel kann ein Transparenzwert zugewiesen werden, der lediglich in Internet Explorer 6 als unsichtbare Fläche interpretiert wird.

RSS-Feed abonnieren