In diesem Ratgeber zeigen wir Ihnen, warum Sie Bilder für Webseiten komprimieren sollten, wie Bild-Optimierung funktioniert und wie Sie das optimale Tool für Ihren Einsatzzweck finden. Mehr zum Thema PageSpeed Optimierung in unserem großen Übersichtsartikel.
Bilder komprimieren für schnellere Ladezeiten
Über 1,5 Megabyte Bilder und Fotos – pro Seitenaufruf! So viel betrug der Durchschnitt für Onlineshops im Jahr 2019. Das ist mehr als die Hälfte des gesamten Downloadvolumens, der im gleichen Zeitraum gemessen wurde. Für Wordpress-Blogs und Drupal-CMS-Systeme sind die Zahlen nur unwesentlich geringer.
Kein Shop kommt ohne Bilder aus. Ob Design-Stehlampe, Sneakers oder Armbanduhr: Je besser sich Kunden ein Bild von einem Produkt machen können, desto wahrscheinlicher werden sie es kaufen. Hochwertige Produktfotos sind daher ein unverzichtbarer Bestandteil einer gelungenen Customer Journey.
Doch dieser hohe Bedarf an Bildern sorgt für längere Seitenladezeiten, besonders auf mobilen Endgeräten. Lange Ladezeiten vergeigen Kunden die Kauflaune: Sie sorgen für eine höhere Bounce Rate, sinkende Conversion Rate und schlechteres Ranking bei Google. Website- und Shop-Betreiber stehen also vor einem vermeintlichen Dilemma: Weniger Bilder oder längere Ladezeiten?
Doch die Lösung kann nicht lauten, auf weniger Bildmaterial zu setzen. 80% der Online-Käufer wünschen sich schließlich noch mehr davon. Um diesem Bedarf gerecht zu werden und trotzdem von schnellen Ladezeiten zu profitieren, müssen die Bilder daher komprimiert werden.
Bildformate im Web kurz erklärt
Es gibt unterschiedliche Einsatzzwecke und daher auch unterschiedliche Formate für Bilder im Web. Im Allgemeinen wird zwischen verlustfreien (lossless) und verlustbehafteten (lossy) Bildformaten unterschieden. Bilder mit verlustfreiem Format behalten auch komprimiert alle ursprünglichen Bildinformationen bei. Bilder mit verlustbehafteten Format können in diesem Prozess Informationen verlieren. Sie haben dafür aber ein höheres Optimierungspotential.
JPEG, auch JPG (Joint Photographic Experts Group)
JPEG ist das bekannteste und meistverwendete Bildformat im Web. Flexibel in Farbtiefe und -modi ist es der Kompressionsstandard für die meisten Digitalkameras und wird auch für Printverfahren eingesetzt. Die verlustbehaftete JPEG-Kompression wird am besten für Fotos und Bilder mit vielen Details angewandt. Durch die Einteilung in Qualitätsstufen kann ein optimaler Kompressionsgrad ermittelt werden.
PNG (Portable Network Graphic)
Das verlustfreie Format PNG kann Transparenzen darstellen und so vor einem andersfarbigen Hintergrund platziert werden. Die PNG-Kompression eignet sich weniger gut für Fotos. Bilder mit wenigen Details und gleichfarbigen Flächen kann sie dagegen viel besser komprimieren als beispielsweise JPEG. PNG bietet sich daher für Illustrationen und Infografiken an.
GIF (Graphics Interchange Format)
Auch GIF ist ein verlustfreies Bildformat, das transparente Flächen ermöglicht. Da damit allerdings nur 256 Farben dargestellt werden können, sollte die moderne PNG-Kompression bevorzugt werden. Ein kleines Revival hat das GIF-Format durch seine Möglichkeit der Animation bei Meme-Liebhabern erlebt. Außerhalb von Memes eignet sich das Format aber nicht sehr gut für Websites.
SVG (Scalable Vector Graphics)
SVG steht für skalierbare Vektorgrafiken, die über XML beschrieben werden und vom Browser interpretiert werden können. Sie eignen sich besonders für Logos und Icons. SVG verfügt im Gegensatz zu den anderen vorgestellten Formaten nicht über eine eigene Kompression. Stattdessen lässt sich SVG wie anderer Code (z.B. HTML oder JavaScript) über Verfahren wie GZip oder Brotli komprimieren.
WebP
Das von Google entwickelte Bildformat WebP bietet sowohl verlustfreie als auch verlustbehaftete Kompression an und ist daher flexibel einsetzbar. Ganz auf “Web Performance” optimiert, könnte das noch recht junge Format die Wachablösung für JPEG und PNG bedeuten. Bereits jetzt kann es PNG-Bilder bei gleicher Qualität um 26% verkleinern. WebP wird von den wichtigsten Browsern und Bild-Programmen unterstützt.
JPEG Bilder über Qualitätsstufe komprimieren
Da das JPEG-Format am besten für Fotos geeignet ist und hier der meiste Bedarf an Optimierung besteht, konzentrieren wir uns im Folgenden auf deren Kompression. Ausschlaggebend ist hier, wie bereits beschrieben, die Qualitätsstufe. Ausgehend von dem Maximalwert 100 gibt sie vor, 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. Das führt zu einer schlechten Erfahrung für Nutzer. Ein kaputt komprimiertes Bild lädt nicht zum Kauf ein, sondern lässt das beworbene Produkt billig und unattraktiv erscheinen.
Im Sinne der Nutzerfreundlichkeit 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 Bildqualität mit geringem Aufwand gesichert. Doch geschieht dies auf Kosten der Ladezeit. Und überhaupt: weisen alle JPEGs auf der gleichen Qualitätsstufe tatsächlich auch eine ähnliche Qualität auf?
Vergleich: Individuelle Kompression von JPEGs
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ätsstufe 92 (61kb)
Qualitätsstufe 69 (29kb)
Original (Detail)
Qualitätsstufe 92 (Detail)
Qualitätsstufe 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 konnten wir die Bildgröße um ungefähr 20% verkleinern.
Original (57kb)
Qualität 92 (41kb)
Qualität 69 (17kb)
Original (Detail)
Qualität 92 (Detail)
Qualität 69 (Detail)
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 lautet: Ein Optimum an Kompression und Qualität ist nur durch eine individuelle Betrachtung jedes einzelnen Bildes zu erreichen.
Wie sollten JPEG Bilder komprimiert werden? Die Suche nach einem Kompromiss
Das stellt Website-Betreiber mit vielen Bildern jedoch vor eine Herausforderung. Besonders Onlineshops mit großem und wechselndem Sortiment sind hiervon betroffen. Ist dieser Aufwand überhaupt zu stemmen?
Ein Rechenbeispiel:
- In Ihren Shop sollen 100 neue Produkte mit je 5 Fotos aufgenommen werden.
- Insgesamt also 500 Bilder, die komprimiert werden müssen.
- Sie testen verschiedene Qualitätsstufen und speichern die optimale ab.
- Dabei entsteht ein Aufwand von 1 Minute pro Bild.
- Bei 500 Bildern bedeutet das 500 Minuten, also ein ganzer Arbeitstag.
Um JPEG-Bilder gezielt und ideal für die Ladegeschwindigkeit zu optimieren, müssen Sie also einen Kompromiss zwischen drei Faktoren eingehen:
- Qualität: Die Bilder sollen in optimaler Qualität für den Nutzer, also ohne sichtbare Artefakte und Schlieren, ausgegeben werden.
- Kompression: Die Bilder sollen in minimaler Qualitätsstufe und damit der geringsten möglichen Dateigröße ausgegeben werden.
- Aufwand: Dieser Prozess soll ressourcenschonend hinsichtlich geleisteter Arbeit, erforderlichem Know-How und finanzieller Mittel ablaufen.
In der Praxis zeigt sich jedoch, dass es schwierig ist, alle drei Faktoren unter einen Hut zu bringen. Wir stellen Ihnen im Folgenden die verschiedenen Möglichkeiten der Bild-Optimierung vor. Lassen sich optimale Bildqualität, hohe Kompression und möglichst geringer Aufwand doch in Einklang bringen?
Bilder am PC oder Mac einzeln und manuell komprimieren
Hierbei gehen Sie einen guten Kompromiss zwischen Qualität und Kompression ein, jedoch zu Lasten eines hohen Aufwands, wie im Rechenbeispiel beschrieben. Sollten Sie jedoch nur einmalig eine geringe Anzahl von Bildern komprimieren wollen, kann sich dieser Weg für Sie lohnen.
Bilder komprimieren mit Photoshop
Das wichtigste Programm zur Bearbeitung und Aufbereitung von Bildern ist nach wie vor Adobe Photoshop. Unter "Datei > Für Web speichern" bietet Photoshop alle gängigen Formate an. WebP kann über ein Plugin hinzugefügt werden.
Für JPEG-Dateien kann die Qualitätsstufe entweder über einen Zahlenwert oder über eine Einschätzung (z.B. “Hoch”) eingestellt werden. Eine kostenlose Alternative zu Photoshop ist Gimp, das ähnlich funktioniert.
Profi-Tipp: Vergleichen Sie verschiedene Qualitätsstufen und folgen Sie dabei erst einmal großen Schritten von 10 und mehr, anstatt von 100 in Einerschritten rückwärts zu gehen. Justieren Sie dann bei Bedarf feiner.
Bilder komprimieren im Browser
Es gibt mehrere Websites, über die Bilder hochgeladen werden können und die dann entweder automatisiert oder durch manuelle Eingabe komprimiert werden. Da diese meist kostenlos zur Verfügung gestellt werden, sind sie eine gute Alternative zu Photoshop. Achten Sie jedoch dabei auf die Angaben zum Datenschutz.
Eine Auswahl von Services zur Bild-Kompression im Web:
Bilder in Stapelverarbeitung komprimieren
Im nächsten Schritt können Sie versuchen, mehrere Bilder gleichzeitig durch Stapelverarbeitung zu komprimieren. Zu Gunsten des investierten Aufwands müssen Sie sich hier jedoch entscheiden, ob dies zu Lasten der Qualität oder der Kompression gehen soll, da diese Programme meist nur die Einstellung einer festen Qualitätsstufe erlauben. In der Regel werden Sie sich für eine hohe Qualität entscheiden, da Sie vermeiden wollen, Bilder kaputt zu komprimieren.
Hinweis: Auch einige der bereits vorgestellten Online-Services bieten an, mehrere Bilder gleichzeitig zu komprimieren. Da diese jedoch in der Anzahl stark beschränkt sind, führen wir sie hier nicht auf.
Bilder mit IrfanView in Stapelverarbeitung komprimieren
Ein Beispiel für ein Programm, das Stapelverarbeitung erlaubt, ist IrfanView. IrfanView unterstützt alle gängigen Formate und über ein Plugin auch WebP. Neben der Option, Bilder zu komprimieren, lassen sich auch Abmessungen und Farbtiefe modifizieren. Darüber hinaus können die bearbeiteten Bilder auch direkt mit einem Stempel versehen werden, um das eigene Copyright zu schützen.
Die Stapelverarbeitung wird über das Menü “Datei > Batch(Stapel)-Konvertierung[...]” ausgewählt, alternativ reicht auch aus, die Taste “b” zu drücken.
Im folgenden Menü werden die Aufgabe(für diese Zwecke: Konvertierung) und die Dateien ausgewählt. Unter “Zielformat” geben Sie “JPG” ein. Über den Button “Option” lassen sich dann die Qualität und viele weitere Angaben einstellen.
Screenshot aus IrfanView
Bilder mit einfachen Plugins komprimieren
Die meisten Online-Händler in Deutschland setzen auf Shopsysteme wie Shopware oder Magento. Diese Systeme lassen sich durch Plugins erweitern. Einfache Plugins wie das zur “Komprimierung und Skalierung der Bilder” für Shopware bieten die Möglichkeit, feste Qualitätsstufen für Produktfotos einzurichten. Beim Hochladen der Bilder werden diese dann automatisiert komprimiert.
Für Plugins entstehen in der Regel nur einmalige Kosten und ihre Einrichtung benötigt keine Programmierung. Durch eine grafische Oberfläche kann das Plugin konfiguriert werden. Das ist praktisch und hält die Aufwände sehr gering. Durch die fest eingestellte Qualitätsstufe haben Sie jedoch keine Kontrolle mehr über die Bildqualität des komprimierten Fotos, sodass unschöne Ergebnisse entstehen können. Auch hier werden Sie daher dazu tendieren, die Qualitätsstufe hoch anzusetzen.
Der E-Commerce-Fachmann Martin Sailer-Arnold beschreibt seine Erfahrung mit einfachen Plugins so:
“Die automatische Optimierung über Plugins brachte leider nicht den gewünschten Erfolg, da die Bilder entweder in zu schlechter Qualität oder mit kaum reduzierter Dateigröße ausgeliefert wurden.”
Bilder mit komplexen Plugins und Skripten komprimieren
Die bisher geschlossenen Kompromisse zeigen eine deutliche Abhängigkeit von der Einschätzung durch den menschlichen Betrachter. Über fest eingestellte Qualitätsstufen lässt sich keine optimale Kompression erreichen, eine individuelle Einschätzung bleibt nötig. Gibt es eine Alternative zum menschlichen Auge?
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.
Diese Methode ist 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.
Beispiele für komplexe Plugins und Skripte
Diese Herangehensweise machen sich einige kostenpflichtige Plugins und Skripte zu Nutze. Die Bezahlung wird hier nach dem Datenvolumen der Bilder vorgenommen, die durch das Plugin oder Skript komprimiert werden. Dadurch entstehen kontinuierliche Kosten, die für Shops mit vielen Produktfotos besonders hoch sind. Mit vielen dieser Plugins geht auch ein Entwicklungsaufwand einher, da die komplexeren Systeme Anpassungen am Webserver benötigen können.
Eine Auswahl dieser Services:
Bilder automatisiert komprimieren mit wao.io
Die Kriterien für die ideale Bild-Optimierung sind also gefunden: Bilder sollen automatisiert und ohne zusätzlichen manuellen Aufwand individuell auf die optimale Qualitätsstufe hin komprimiert werden. Die zuletzt vorgestellten Skripte können das leisten, jedoch zu einem hohen finanziellen Aufwand.
Mit wao.io haben wir einen Cloud-Service geschaffen, der Bilder automatisiert komprimiert und dazu kontinuierlich weiterentwickelt wird. Dabei nutzen wir unsere eigene Weiterentwicklung von DSSIM, die auf Produktbilder optimiert ist. Die Abrechnung erfolgt nicht über das Datenvolumen der Bilder, sondern pro Besucher des Shops. Das lohnt sich also besonders für kleine und mittlere Shops.
Mit wao.io wird Ihre Website in der Cloud zwischengespeichert und dort optimiert. Sie können also wie gewohnt den Content und die Produkte pflegen, während wao.io automatisch die Optimierung für Sie übernimmt. Da wao.io ein deutsches Unternehmen ist und in Deutschland gehostet wird, müssen Sie sich keine Sorgen über die Einhaltung des Datenschutzes machen.
Zusätzlich zur Komprimierung von Bildern sind bei wao.io weitere Maßnahmen zur PageSpeed Optimierung im Preis enthalten, etwa die schnelle Datenübertragung mit HTTP/2 oder das “Lazy Loading” von Bildern. Auch die Website Security wird automatisiert erhöht, z.B. durch einen DDoS-Schutz und ein SSL-Zertifikat ohne zusätzliche Kosten.
Sehen Sie jetzt alle Vorteile von wao.io auf einen Blick!
