WooCommerce optimieren Teil #4: Verringere die Dateigröße deiner Bilder

Komprimierung: Wie viel ist noch gut genug?

Bei einem JPG ist es entscheidend, wie du das Bild abspeicherst und welche Kompressionsrate du dabei wählst. Bei Photoshop hast du zum Beispiel die Möglichkeit, das Bild „für das Web“ zu speichern d.h. alle überflüssigen Informationen werden nicht mit im Bild gespeichert, stattdessen werden nur die reinen Bildinformationen gespeichert.

Die meisten Leute sind bei der Komprimierung zu zaghaft. Auf einer Skala von 0-100 % reicht für die meisten Anwendungsfälle eine Qualität von 40-50 % (Photoshop) völlig aus. Mit dem bloßen Auge ist kein Unterschied zum Original ohne Komprimierung feststellbar. Selbst wenn man hereinzoomt sind nur vereinzelt Artefakte und Fehler erkennbar.

Welche Komprimierungsstufe am besten ist, muss aber jeder für sich selbst herausfinden, denn das hängt vom eigenen Anspruch, den Bildmotive und dem Einsatzzweck ab.

Komprimierung und der Google Page Speed Test

Beim Pagespeed Insights Test vergleicht Google die Dateigröße von jedem Bild mit der Dateigröße, die das jeweilige Bild hätte, wenn es mit Photoshop „für das Web“ mit einer Qualität von 50 Prozent gespeichert worden wäre. Ist das eingebundene Bild mehr als 10 Prozent größer, dann gibt Pagespeed Insights eine Warnung aus und du verlierst ein paar Punkte im Speed Score.

Wordpress Bildkomprimierung verbessern ohne plugin

Wenn du ein Bild in WordPress hochlädst, dann wird dein Bild direkt ohne weitere Komprimierung gespeichert. Deshalb solltest du dein Bild vor dem Hochladen auf jeden Fall optimieren.

Die Bilder, die WordPress in verschiedenen Größen aus deinem Originalbild generiert, komprimiert Wordpress standardmäßig mit der PHP-Bibliothek ImageMagick. Wenn diese nicht verfügbar ist, verwendet es die GD-Library.

Seit der Version 4.5 arbeitet Wordpress mit einer Kompressionsrate von 82 Prozent (ImageMagick/GD). Dies entspricht in etwa der Photoshop-Einstellung „High Quality“ beziehungsweise 60 Prozent.

Bei dieser Einstellung wird Pagespeed Insights aber wie oben erwähnt eine Warnung auspucken. Damit Google zufrieden ist, darf die Qualität aber maximal 70 bis 75 Prozent (ImageMagick/GD) liegen.

Ich empfehle Dir deshalb, die Kompressionsrate von 82 auf 70 bis 75 Prozent zu ändern. Je nachdem, wie wichtig dir eine besonders hohe Bildqualität ist. Dem Otto Normaluser wird der Unterschied zwischen 82 und 70 Prozent nicht auffallen.

Füge dazu diesen Code-Schnippsel in die functions.php deines Child-Themes ein:

Bildgrößen neu erstellen

Wenn Du die die Bildgrößen oder die Kompressionsrate geändert hast, dann gilt dies nur für alle Bilder, die Du neu hochlädst. Willst Du die bestehenden Bilder mit all ihren Bildgrößen neu erstellen und komprimieren lassen, dann verwende dafür am besten das Plugin Regenerate Thumbnails. Es erzeugt für alle Bilder in der Mediengalerie sämtliche Bildgrößen neu.

Plugins zur Bildpotimierung

Es gibt Plugins, die dich bei der Bildkomprimierung unterstützen können. Zum Beispiel Smush oder Imagify. Das interessante an diesen Plugins ist, dass sie sämtliche von WordPress berechneten Bildgrößen komprimieren. Dadurch kannst du sehr viel Traffic einsparen und so die Seite für den Nutzer deutlich schneller machen.

Durch diese Plugins kannst Du bei Thumbnails nur ein paar lausige Prozent, bei größeren Bildern bis zu 30 Prozent einsparen.

Aber nur, wenn man die Einsparungen im Vergleich zu der WP Standardeinstellung 82Q vergleicht.

In meinen Test hat eine Herabsetzung der Wordpress jpeg_quality auf 70 die gleichen Einsparungen gebracht, wie der Einsatz von WP Smush.

Bei manchen Bildern etwas weniger, bei manchen deutlich mehr.

Ein weiterer großer Nachteil: meist nutzen diese Plugins einen Webservice, um die Bilder zu komprimieren. D.h. dein Bild wird an einen anderen Server gesendet, dort komprimiert, und dann zurück an deinen Server gesendet.

Gerade dann, wenn Bilder in großer Menge neu berechnet werden müssen, zum Beispiel, weil du die Standard Bildgrößen auf deiner Webseite verändert hast, führt dies oft zu einem Problem. Denn der gesamte Komprimierungsvorgang vom Senden zum anderen Server über die Komprimierung zum Zurücksenden an deinen Server kann schnell ein paar Sekunden dauern.

Nun hört sich das erst einmal nicht nach viel an, aber du musst bedenken, dass pro Bild in der Mediathek 5-10 Größen vorgehalten werden müssen. D.h. die Komprimierung aller Bildgrößen eines einzelnen Bildes in deiner Mediathek kann über Plugins wie Smush bis zu 1 Minute und länger dauern.

Es kann immer mal wieder vorkommen, dass sich die Bildgrößen ändern. Zum Beispiel auch wenn du das Layout veränderst oder das Theme wechselst. Dann müssen alle Bildgrößen durch Wordpress neu erstellt werden. Bei einem Shop mit 500 Produkten ergibt sich mit einem externen Plugin wie Smush schnell eine Gesamtdauer von mehreren Stunden, um alle Bilder neu berechnen zu lassen.

Vor diesem Hintergrund musst du genau überlegen, ob die Wahl eines Plugins für dich richtig ist.

WebP gehört die Zukunft

Seit ein paar Jahren gibt es schon den neuen Bildstandard WebP. Er bietet eine deutlich bessere Komprimierung als JPEG und du kannst die Datenmenge bis auf ein Viertel reduzieren.

Der Haken an der Sache: Nicht alle Browser unterstützen Webp. Zurzeit erfolgen weltweit 73 Prozent der Seitenzugriffe mit einem Browser mit WebP-Unterstützung. In Deutschland sind es noch magere 51 Prozent. Jedoch steigt die Zahl der Browser, die WebP unterstützen, stetig an.

Aktuell experimentiert z.B. Safari noch mit WebP. Wenn der Nachzügler Apple endlich die WebP-Unterstützung auf alle Geräten ausrollt, dann steigert das die Unterstützung von WebP in Deutschland auf über 70 Prozent.

Und je mehr Websites und Onlineshops WebP nutzen, umso größer wird der Druck auf die Hersteller, die die Unterstützung noch nicht in ihre Browser implementiert haben.

WebP und JPG gleichzeitig verwenden

Zum Glück kann man an die Nutzer, die einen WebP tauglichen Browser verwenden, die WebP Bilder ausliefern und an Nutzer, deren Browser WebP nicht unterstützt das normale JPEG. Der Nutzer lädt dabei nicht beide Dateien herunter, sondern nur die für ihn passende.

Du kannst WebP-Bilder mit Hilfe von Plugins wie dem EWWW Image Optimizer erzeugen und ausliefern lassen. Allerdings arbeiten die meisten dieser Plugins mit einem externen Bildkomprimierungs-Service, mit den oben beschriebenen großen Nachteilen.

Eine Ausnahme ist WebP-Express. Es nutzt Bibliotheken wie ImageMagick oder GD, um die WebP-Version der Bilder lokal zu erzeugen.

Leider wird der Einsatz von WebP derzeit in den wenigsten Standard-Hosting-Umgebungen unterstützt. Ich hoffe, dass sich das schnell ändert. Wenn du einen eigenen Server hast, kannst du gegebenenfalls die Konfiguration anpassen, damit WebP-Bilder erzeugt und ausgespielt werden können. Allerdings ist das nur etwas für Profis.

Die einzige wirklich praktikable Lösung ist aktuell die Nutzung eines CDN. So bietet der Pro-Plan von Cloudflare mit Polish eine Funktion zur Bildoptimierung inklusive WebP-Support.

Fazit

Kurze Ladezeiten und eine gute Bewertung durch Google erreicht man durch eine einfache Anpassung der Kompressionsrate. Den Einsatz von Plugins wie Shmush und Imagify sehe ich kritisch. Mein Geheimtipp ist WebP.

Inhaltsverzeichnis

1. So findest Du ein schnelles Theme
2. Wähle Deine Plugins sorgfältig aus
3. Binde deine Bilder in der passenden Größe ein
4. Verringere die Dateigröße deiner Bilder
5. Nutze Caching, aber kenne die Grenzen
6. Wann ist ein CDN sinnvoll?
7. Hosting - Wie viel Leistung brauchst du?