Zurück zur Übersicht
2. August 2018

Webseiten schneller machen (III): Bilder komprimieren

Bevor man sich überlegt, ob man verschiedene Bildgrössen für unterschiedliche Endgeräte anbietet, sollten zuerst die Basisfotos optimal komprimiert werden. Viele Web-Angebote lassen bei der simplen Kompression von Pixelgrafiken sehr viel Speicherplatz liegen.

In den meisten Fällen werden Bilder ins JPEG oder PNG 8 (GIF) Format komprimiert. Beides sind verlustbehaftete („lossy“) Formate, es geht also immer Bildinformation verloren – aber so dass es kaum bemerkbar ist.
PNG 8 ( 8-bit Version mit 256 Farben) eignet sich für flächige Bildern mit wenigen Farben (Grafiken, Logos, Icons). Mit einer Bildbearbeitungs-Software kann die maximale Zahl von 256 möglichen Farben weiter reduziert werden.

Abbildungen mit sehr vielen Farben (Farbverläufe und Fotos) werden im JPEG Format dargestellt. Der JPEG Algorithmus verfügt über zahlreiche Optionen –  in der Praxis ist aber die Qualitätsstufe (in Prozent) der entscheidende Parameter. Je niedriger die Qualitätstufe gewählt wird, desto weniger Speicherplatz hat die resultierende Datei. Niedrige Qualität bedeutet aber möglicherweise Verzerrungen und/oder Farbverfremdungen im Foto.

Tools zur Bildkompression

Das Komprimieren von Bildern war immer eine klassische Domäne von Desktop-Software (Photoshop & Co). In den letzten Jahren sind zahlreiche Online-Dienste aufgetaucht – wie  TinyPNG (die API gilt auch für das WordPress Plugin Compress JPEG & PNG von derselben Firma) oder Compressor (fancy!).  Für WordPress gibt es viele Plugins, ich habe positive Erfahrung mit SmushIt und Compress JPEG, Diese Tools erlauben aber alle KEINE individuelle Wahl des Kompressionsalgorithmus oder der Qualitätstufe. Dafür muss man auf Photoshop oder Gimp (kostenfrei) ausweichen – beim Export kann dann die Einstellung gewählt werden.

Nutzer erscheinen ziemlich resistent gegen Bildstörungen 

Die Wahrnehmung von JPEGs auf dem Bildschirm ist auffallend störungsresistent, das ist mein persönlicher Eindruck aus der Arbeit für Klienten.

Die Nutzer rechnen offenbar unbewusst mit leichten Abweichungen in der Schärfe und Farbgebung und fokussieren sofort auf das zentrale Motiv. Die Verbreitung von Filtern in sozialen Medien und die kurze Wahrnehmungsspanne hat auch zu einem „Abnutzungseffekt“ geführt. Viele User übersehen (oder ignorieren) Kompressionsartefakte – solange das Hauptmotiv nicht betroffen ist.

Welche Qualitätsstufe individuell akzeptabel ist hängt vom Bildaufbau ab  – und sollte immer ausprobiert werden. Detailreiche Ausschnitte und scharfe Kanten sind empfindlicher gegen hohe Kompression als monotone Flächen. Aber auch sanfte Farbverläufe zeigen rasche Artefakte – wie im vorliegenden Portrait (Wange des Mädchens).

Das Foto kann trotzdem auf 50% Qualität eingestellt werden, ohne nennenswert an Wirkung zu verlieren. (60% Ersparnis an Dateivolumen).


Große Hintergrundbilder vertragen verblüffende Kompression

Besonders effektiv ist die starke Kompression von großen Hintergrundbildern. Aus meiner Erfahrung ist es verblüffend wie hoch man komprimieren kann – ohne den Durchschnittsbesucher zu irritieren. Das hochkomprimierte Bild des Sees in Alaska hat mit 133 kB nur etwa ein Viertel der Dateigrösse des Standardfotos (80%). Trotz der Artefakte am Himmel  ohne Probleme als Hintergrundbild für die Desktop-Version einer Webseite verwendbar.