JPEG-Kompression im Webdesign

"Photoshop, Save for Web, passt schon!"

Spätestens wenn eine SEO-Agentur zu einem Projekt hinzugezogen wird, flattern die ersten Briefings, mit hübsch aufbereiteten und schnell verständlichen Optimierungsvorschlägen herein. PageSpeed Insights, YSlow, Pingdom und wie sie heißen, verzeihen die alte, längst zur Unart gewordene, Praxis, im letzten Moment vor dem Launch der Website noch schnell ein paar Bilder zu tauschen und dabei auf saubere Komprimierung zu verzichten, nur ungern.

Eine Vielzahl an on- und offline Tools zur Komprimierung von Fotos und Grafiken einer Website fliegen daher durchs Netz. Besonders erwähnenswert, meine derzeitigen Favorites im Bereich Online-Tools https://squoosh.app/ und der Evergreen https://tinypng.com/, der anders als der Name vermuten lässt, neben PNG auch JPEG verarbeitet.

Die Frage nach der besten Möglichkeit zur Optimierung der Fotos einer Website ist auch in unserem Web Team ein immer gerne diskutiertes Thema von Grafikern und Content Managern, weshalb ich in einem vollkommen unwissenschaftlichen Vergleich einige der gängigen Kompressionsverfahren, die mir regelmäßig über den Weg laufen, vergleichen möchte.

Lange Rede kurzer Sinn

Die mit Abstand größten Files lieferte im Praxistest Photoshops "Save for Web" Export ( zumindest ohne zusätzliche Plugins).  Das selbe Foto komprimiert mit Googles Gützli Encoder ergibt ein rund 60 % kleineres File bei gleichbleibender Bildqualität.

Zugegeben, der Vergleich mit Gützli hinkt, wenn man nicht vernachlässigt, dass Gützli Unmengen an Arbeitsspeicher "frisst" und Minuten mit der Aufgabe beschäftigt ist, während Photoshop - sowie alle andere Verfahren im Test - in Sekunden das Ergebnis liefert.

Gefühlt das akzeptabelste "Preis-Leistungs-Verhältnis" erzielten im Test Jpegoptim und MozJPEG, die passabel kleine Files in sehr kurzer Zeit abliefern. 

JPEG Compression Tools im Praxistest

Ausgangspunkt meines Tests, ist das random ausgewählte Foto "Brown Haired Porcelain Doll Behind White and Blue Floral Surface" von Silvia Trigo (@silvinhatrigo) auf Unsplash.com in einer Auflösung von 1920 x 1280 Pixel mit einer Originalgröße von ca. 283 kB.

Weil das Originalbild von Unsplash wahrscheinlich bereits in irgendeiner Form komprimiert ist und alle möglichen Faktoren, die das Resultat der verschiedenen Kompressionsverfahren beeinflussen, ignoriert werden, ist das Ergebnis dieses Vergleichs bestenfalls eine Annäherung, die dennoch sehr deutlich zeigt, welche Auswirkung die Wahl des Tools für die Kompression von Bildern einer Website hat.

Getestet wurde jeweils die Kompression mit einer Qualitätsstufe von 85 % und einer Auflösung von 1920 x 1280 Pixel.

Mit weitem Abstand die Verlierer des Testlaufs sind Photoshops Save for Web Export und Gimp (jeweils ohne spezielle Plugins). Bei Tests mit verschiedenen Page Speed Testern (z. B. Googles PageSpeed Insight) wurden nur die Fotos, die mit diesen beiden Tools erstellt wurden, bemängelt. Alle anderen Bilder, obwohl auch hier noch immer ein Unterschied von 100 kB zwischen größter und kleinster Datei liegt, wurden nicht kritisiert.

Außer Konkurrenz, weil nicht JPEG, zeigt WebP (auch schon wieder aus dem Hause Google) was in diesem Bereich möglich ist, wenn es ein um 70 % kleineres Bild als Photoshop abliefert.  Es basiert auf der Technik, die auch im VP8 Video Codec genutzt wird, um Keyframes zu komprimieren. Das Format hat aber nicht nur das Potential, JPEG in Zukunft abzulösen, sondern könnte Dank Alpha Channel auch PNG ersetzen.

Warum 2020 trotzdem 90 % der Grafiken, die über meinen Tisch wandern, nicht im WebP Format abgeliefert werden, liegt vielleicht an der Unterstützung des Formats in älteren Browsern. Während alle "echten" Browser in aktuellen Versionen WebP nativ unterstützen, braucht Internet Explorer, der alte Freund des Web Developers, noch immer eine Krücke (sprich: Fallback Lösung), um sich an WebP Grafiken nicht zu verschlucken.

Fazit

Die vielleicht beliebtesten Tools zur Grafikbearbeitung, liefern out of the Box kein für Web-Nutzung passables Ergebnis. Das Komprimieren der Fotos im letzten Schritt des Grafikers erfreut nicht nur die SEO Agentur, sondern auch das Google Ranking und die Besucher der Website; vor allem auf mobilen Geräten. 

MozJPEG und Jpegotim sind für den täglichen Hausgebrauch wahrscheinlich die beste Wahl, wenn sie sehr schnell vergleichbar kleine Bilder erzeugen. Alle im Test verwendeten Tools sind als freie Open Source Lösungen für alle relevanten Plattformen im Netz zu finden und für den schnellen Einsatz zwischendurch, gibt es mit https://squoosh.app/ oder https://tinypng.com/ bequeme, kostenlose Webapps zur Optimierung von Fotos und Grafiken für Websites.

Auf absehbare Zeit wird aber - so meine Einschätzung spätestens nach diesem Praxistest - kein Weg an WebP im Webdesign vorbei führen. Der Größenunterschied zwischen dem kleinsten JPEG und WebP ist unbestreitbar signifikant, und Google als Platzhirsch aber auch andere Tools, die sich mit der Geschwindigkeit von Websites beschäftigen, pushen das Format mit jedem Testergebnis.