Bilder komprimieren ohne Kompromisse: Mit cleveren Algorithmen zu idealer Qualität

Nutzer möchten tolle hochauflösende Bilder sehen. Doch wenn die Website zu lange lädt, springen sie ab. Wie man mit modernen Algorithmen unter geringem Aufwand Bilder komprimieren kann, lest ihr hier.

Bilder komprimieren für mehr Page Speed

Websites werden immer größer. Das liegt in der Hauptsache an Bildern: Über die Hälfte des durchschnittlichen Download-Volumens einer Webseite entfallen auf Bilddateien. Wiederum die meisten davon entfallen auf den Typ JPEG.

Kein Online-Shop kommt mehr ohne hochauflösende Produkt-Fotos aus, an die man heranzoomen kann. Keine Webseite verzichtet auf kristallklare Bilder von Menschen und Landschaften, die Gefühle wecken und zum Kauf ermuntern.

Doch ein anderer Faktor beeinflusst Nutzer dabei umso mehr: Nach einem Optimalwert von zwei Sekunden Ladezeit wird es immer wahrscheinlicher, dass Nutzer die Webseite verlassen. Zu lange Ladezeiten beeinträchtigen zudem die Verweildauer und letztlich die Konversion von Nutzern zu Kunden.

Es ist daher unerlässlich, im Sinne der Website-Optimierung Bilder zu verkleinern. Dies stellt Website-Betreiber jedoch vor einige Hürden. Sie versuchen, einen Kompromiss zwischen Kompression, Qualität und geleistetem Aufwand zu finden.

Qualität vor Kompression: Ein fauler Kompromiss

Bild-Kompression für JPEG-Dateien ist durch viele Werkzeuge möglich. Eine kurze Recherche im Internet führt zu Websites und Programmen, die einzelne oder gleich mehrere Bilder verkleinern können.

Dabei stellt man meist eine Qualitätsstufe ein, auf die man die Bilder optimieren möchte. Ausgehend von dem Maximalwert 100 ist sie ausschlaggebend dafür, wie weit man die Bildgröße verkleinern kann.

Gerade bei JPEG-Bildern führt eine Kompression jedoch schnell zu unschönen Ergebnissen: Artefakte und Schlieren im Bild stellen sich oft schon bei geringer Reduzierung der Qualität ein. Auch hier reagieren Nutzer empfindlich. Ein kaputt komprimiertes Bild lädt nicht zum Kauf ein, sondern lässt das beworbene Produkt billig und unattraktiv erscheinen.

Im Sinne der Nutzer-Freundlichkeit werden Qualitätsstufen daher oft sehr konservativ eingestellt. Google und Bild-Experten raten zu einer Stufe zwischen 80 und 85, unterhalb derer man nicht Bilder und Fotos komprimieren sollte.

Durch diese pauschale Einstufung wird Bild-Qualität mit geringem Aufwand gesichert. Doch geschieht dies auf Kosten der Kompression und damit der Website-Ladezeit. Außerdem gibt es Bilder, die dem menschlichen Auge selbst bei einer Qualitätsstufe von 85 schon unschön erscheinen. Dieser Kompromiss ist also ein fauler.

Individuell Bilder optimieren

Vergleichen wir die Bild-Kompression folgender JPEG-Fotos. Es fällt auf, dass sie bei gleicher Qualitätsstufe unterschiedlich gut auf den Betrachter wirken. Der Pelikan hat auf einer Stufe von 92 noch jede Menge Einsparpotential. Bis zu einer Stufe von 69 – weit unter dem Google-Standard – fallen nur wenige Veränderungen auf. Mit 29kb wurde die Ausgangsgröße auf ein Drittel reduziert.

Original (88kb)

Qualität 92 (61kb)

Qualität 69 (29kb)

Original (Detail)

Qualität 92 (Detail)

Qualität 69 (Detail)

Das Foto der Salzwüste dagegen lässt sich bis zu einer Qualitätsstufe von 92 gut ansehen. Bei dem Wert 69 angekommen, kann man eine starke Fragmentierung im Verlauf des Himmels beobachten, so dass diese Einstellung nicht in Frage kommt. Hier konnte man um ungefähr 20% die Bildgröße verkleinern.

Original (57kb)

Qualität 92 (41kb)

Qualität 69 (17kb)

Original (Detail)

Qualität 92 (Detail)

Qualität 69 (Detail)

Jedes Bild hat also offensichtlich einen unterschiedlichen Anspruch an seine Kompression. Bei einer pauschalen Qualitätsstufe von 85 hätte man beim Pelikan noch erhebliches Einsparpotential verschwendet. Die Salzwüste dagegen würde auf dieser Stufe schon unschön auf den Betrachter wirken.

Die Konsequenz daraus ist: Ein Optimum an Kompression und Qualität ist nur durch eine individuelle Betrachtung jedes einzelnen Bildes zu erreichen. Doch wie soll sich ein Online-Shop mit mehreren tausend Produkt-Bildern und regelmäßigen Updates diesen Aufwand leisten?

SSIM ersetzt den Menschen

Die individuelle Auswertung von Qualitätsstufen kann man heutzutage dem Rechner überlassen. Mit dem Algorithmus SSIM (Structural Similarity) kann die strukturelle Ähnlichkeit oder Abweichung zwischen einem komprimierten Bild und dessen Original ermittelt werden.

SSIM wurde durch die Auswertung menschlicher Betrachtungsweisen entwickelt und ersetzt somit das Auge für den Rechner. Der Algorithmus wurde in den letzten Jahren kontinuierlich erweitert. So liegen mit MS-SSIM (Mehrskalen-SSIM) und DSSIM (Structural Dissimilarity) nun Verbesserungen vor, die zuverlässige Werte liefern.

Insbesondere die Weiterentwicklung MS-SSIM eignet sich für die Überprüfung von Kompressionsergebnissen. Mit DSSIM wird dagegen die Berechnung der Distanz zum Original einfacher und aussagekräftiger.

Der Beispiel-Graph zeigt die Bild-Distanz (DSSIM) im Vergleich zur Bildgröße. Durch die Festlegung eines bestimmten Schwellenwertes für DSSIM kann die optimale Qualität des Bildes ermittelt werden. Dies legt gleichzeitig die optimale Einsparung durch die Kompression fest. Die Qualitätsstufen der Fotos oben wurden auf diese Weise ermittelt.

Leider ist diese Methode sehr rechenintensiv. Jedes Bild muss dabei in vielen verschiedenen Qualitätsstufen komprimiert werden. Für jedes Zwischenergebnis muss zudem ein SSIM-Index und daraus folgend der DSSIM-Wert berechnet werden.

Um diesen Prozess zu optimieren, kann Machine-Learning eingesetzt werden. Bei wao.io verwenden wir aktuell das Modell „1-step Newton“, aber auch Modelle wie “Random Forest” und “Flat Decision Tree”, die in dem Programm scikit-lean verfügbar sind, lassen sich hierzu heranziehen. Damit wird die erforderliche Rechenleistung gesenkt.

Fazit: Keine Kompromisse bei der Bild-Optimierung

Bilder komprimieren ist für das moderne Web unerlässlich. Die Betrachtung zeigt aber, dass Website-Betreiber sich oft für einen Kompromiss entscheiden, der zu Ungunsten von Kompression, Qualität oder Aufwand geht.

Um den Aufwand bei der Kompression gering zu halten, setzen die meisten auf feste Qualitätsstufen. Dabei wird eine annehmbare Qualität erzielt, aber individuelles Einsparpotential liegen gelassen. Werden dagegen Bilder einzeln betrachtet und komprimiert, wird ein Optimum an Qualität und Kompression erreicht. Doch der Aufwand für Mensch und Maschine ist in diesem Fall enorm.

Abhilfe schafft eine intelligente Komprimierung und Qualitätsbewertung durch den Rechner. Dies kann durch ein auf den Bild-Kontext optimiertes DSSIM und Machine-Learning erreicht werden. Auf wao.io bieten wir diese Art der Bild-Optimierung – automatisiert und ohne Entwicklungsaufwand. Website- und Online-Shop-Betreiber, die bei der Bild-Optimierung keine Kompromisse eingehen wollen, suchen also nach dieser Lösung.

Zur Blog-Startseite