Bildoptimierung fürs Web

Wer hat sich nicht schon geärgert, wenn Websites zumindest gefühlt ewige Ladezeiten aufweisen, nur um dann Bilder anzuzeigen, die in (viel zu) hoher Auflösung präsentiert werden? Welcher Website-Betreiber ist sich aber bewusst, dass komprimierte und optimierte Bilder nicht nur die Nutzererfahrung verbessern, sondern sich auch positiv auf das Ranking der Website durch Suchmaschinen auswirken können? Eines steht dadurch fest: Der Optimierung des Bildbestands einer Website die nötige Aufmerksamkeit zuteil werden zu lassen, zahlt sich in jedem Fall aus.

Bereits vor einigen Jahren haben wir deshalb in einem Thema des Monats einen Webdienst vorgestellt, mit dessen Hilfe sich Bilddateien erheblich komprimieren lassen. Das ist eine praktische Lösung, wenn lediglich einige wenige Bilder (max. drei parallel, zudem in der Dateigrösse des Ausgangsmaterials beschränkt) für die Verwendung auf einer Website o.ä. in ihrer Dateigrösse reduziert werden sollen. Allerdings ist man hierbei dem Algorithmus des Services ausgeliefert und hat keinerlei Einfluss auf den Grad der Komprimierung.

Will man über mehrere Einstellungen und Methoden der Komprimierung das Ergebnis beeinflussen, bietet sich die entsprechende Bearbeitung der Bilder in einer Bildbearbeitungssoftware an. Die entsprechenden Techniken werden nicht nur von professioneller Software à la Adobe Photoshop beherrscht, sondern auch mit der Open Source Software Gimp oder dem vor allem als Bildbetrachter bekannten IrfanView lassen sich gute Ergebnisse erzielen.
Wichtig ist in einem ersten Schritt, die Abmessungen der Bilddatei den individuellen Bedürfnissen anzupassen: Ein ausschliesslich als Vorschaubild verwendetes Bild muss gewiss nicht mit „Full HD-Auflösung“ zur Verfügung gestellt werden.

In Gimp etwa wird eine JPEG-Datei exportiert und dabei das Häkchen für die erweiterten Optionen gesetzt. Im folgenden Dialog gilt es einige Massnahmen zu treffen.

Gimp Komprimierung jpeg
Die direkte Vorschau sollte ausgewählt werden, um die anderen Auswirkungen der anderen Einstellungen zumindest rudimentär „live“ überprüfen zu können. Mehrere Einstellungen helfen dabei, die Dateigrösse eines Bildes drastisch zu verringern, ohne dabei allzu grosse Qualitätseinbussen in Kauf nehmen zu müssen. Es gilt freilich zu bedenken, dass beinahe jede Komprimierung sichtbare Spuren hinterlässt – hier muss der Mittelweg zwischen Qualität und Dateigrösse ausgelotet werden.

Eine zentrale Einstellung ist hier nun der Regler für die Qualitätsstufe, dessen Auswirkungen mit der Vorschau genau überprüft werden sollten. Je nach Bild- und Verwendungart kann eine Reduzierung der Qualität auf den Wert 70 oder auch 60 zufriedenstellende Resultate erbringen bei gleichzeitiger deutlicher Verringerung der Dateigrösse.

Weiteres Potential bietet das Menü für „Zwischenschritte“, mit dem die Art der Farbunterabtastung (subsampling) ausgewählt werden kann. Die verschiedenen Möglichkeiten stehen für unterschiedliche Herangehensweisen im Umgang mit Farbkanälen und machen sich zu Nutze, dass das menschliche Auge Helligkeitsunterschiede viel deutlicher wahrnimmt als Farbunterschiede. „4:4:4“ ergibt zwar die beste Bildqualität, hat aber eine wesentlich höhere Dateigrösse zur Folge als die „geviertelte Farbart (4:2:0)“, welche aber für viele Website-Illustrationen genügen kann.

Eine weitere Einstellung, die sich weniger auf die Dateigrösse, dafür aber in anderer Hinsicht auf die Ladezeit des Bildes auswirkt, ist die Speicherung als progressives JPEG, die für jedes auf der Website eingesetzte Bild verwendet werden sollte. Diese dem Interlacing bei GIF-Dateien entsprechende Speicherart sorgt dafür, dass dem Besucher der Website bereits eine Art Vorschaubild angezeigt werden kann, bevor das komplette Bild geladen ist, was vor allem die gefühlte Ladezeit erheblich verringert.

Mit diesen Einstellungen lassen sich problemlos gute Ergebnisse erreichen. Es gilt allerdings, dass dieses Vorgehen Handarbeit und bei einer grösseren Anzahl von Bildern durchaus zeitraubend ist.

Aus diesem Grund kann natürlich gewünscht sein, die Bildkomprimierung zu optimieren oder gar zu automatisieren. Dabei stehen zwei verschiedene Ansätze zur Verfügung: Zum einen die offline und lokal mögliche Stapelverarbeitung, also die Anwendung etwa der beschriebenen Speicher-/Exportparameter auf eine grössere Anzahl Bilder. Zum anderen die serverseitige Komprimierung und Optimierung der Bilddateien, die auch automatisiert auf (durch Upload o.ä.) neu hinzukommende Bilder ausgeweitet werden kann.

In den verschiedenen Programmen zur Bildbearbeitung ist die Stapelverarbeitung unterschiedlich integriert und in die graphische Oberfläche eingebunden. Findet sich der hierfür zuständige „Bildprozessor“ unter „Datei“ > „Skripten“, muss in Gimp erst ein entsprechendes Plugin nachgerüstet werden, und bei IrfanView findet sich der gewünschte Dialog unter „File“ > „Batch conversion“ (Stapelverarbeitung). Im letztgenannten Fall zeigt sich, dass hier bereits die bekannten Einstellmöglichkeiten ebenfalls vorhanden sind, ergänzt um weitere Parameter (und zusätzliche Möglichkeiten sind via „Advanced“ auswählbar):

IrfanView Batch Conversion
Unterscheiden sich diese beiden Herangehensweisen lediglich in der Anzahl der parallel zu komprimierenden Bilddateien, eint sie wiederum das punktuelle und manuelle Initiieren der jeweiligen Komprimierung.
Freilich sind unzählige Szenarien denkbar, in denen solche manuellen Workarounds nicht erwünscht oder auch nicht umsetzbar sind. Sobald der Bildbestand einer Website dynamisch wächst und sich eventuell aus verschiedenen Quellen speist, ist das lokale Bearbeiten an einem Ort nicht mehr zielführend. Die Komprimierung muss stattdessen serverseitig vorgenommen oder zumindest initiiert werden.
Für solche Aufgaben stehen verschiedene Möglichkeiten zur Verfügung. Tinypng, das auch JPEG-Dateien verarbeiten kann, bietet hierfür eine Developer API an, die sich unter anderem in WordPress und Magento einfach via Plugin nutzen lässt. Libraries stehen zudem für Ruby, PHP, node.js, Python et cetera bereit. Die Bilder können für die automatische Komprimierung entweder hochgeladen oder über die Angabe einer URL spezifiziert werden. Nach vollzogener Bearbeitung stellt wiederum tinypng eine URL für den Download bereit. Bis 500 Bilder pro Monat ist dieser Service zudem kostenlos nutzbar.

Einen sehr ähnlichen Ansatz verfolgt kraken.io, und seit kurzer Zeit mischt auch Google in diesem Segment mit. Im März dieses Jahres wurde dessen „Guetzli“ getaufter Algorithmus präsentiert. Dieser arbeitet hinsichtlich seiner Komprimierungsgeschwindigkeit zwar geringfügig behäbiger, soll aber bei gleicher Qualität die Bildgrösse erheblich verringern, auch im Vergleich zu anderen Algorithmen – geworben wird diesbezüglich immerhin mit um 35% geringeren Dateigrössen.

Es zeigt sich damit: Die Möglichkeiten, Bilder für die Verwendung auf Websites zu komprimieren, sind vielfältig. Von wesentlicher Bedeutung sind dabei einige Aspekte, die bedacht werden müssen und deren Nichtbeachtung von keinem Algorithmus wieder gut gemacht werden kann:

  • die Bilder sollten in ihren Abmessungen dem Verwendungszweck entsprechen;
  • die „Erstkomprimierung“ eines Bildes ermöglicht wesentliche Einsparungen bei der Dateigrösse, dieser Schritt kann aber freilich nicht öfters mit dem gleichen Resultat wiederholt werden.

Die mit der Bildkomprimierung verbundenen Mühen lohnen sich allerdings in beinahe jedem Fall, denn selbst die Einsparung weniger Kilobytes pro beim Seitenaufruf geladenen Bild kann sich für manchen User bemerkbar machen – sei es anhand der Ladezeit der jeweiligen Website oder anhand des eingesparten Datenvolumens. Möglichst gut komprimierte Bilder zu verwenden kommt somit beiden Seiten zugute: Dem User durch genannte Einsparungen, dem Betreiber der Website durch reduzierten Traffic und ein besseres Abschneiden hinsichtlich Performance, was wiederum positive Auswirkungen auf die Positionierung in den Ergebnissen von Suchmaschinen mit sich bringen kann.

Haben Sie weitere Fragen zum Thema? Zögern Sie nicht und nehmen Kontakt mit uns auf!

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.