Bildkomprimierung in Shopware

Heutzutage ist im Durchschnitt knapp 50% der Webseitengröße auf Bilder zurückzuführen. Da ist es nur sinnvoll seine Bilder komprimiert auszuliefern. Das Shopware dabei nicht immer den besten Job macht, ist den Entwicklern vermutlich mittlerweile auch klar geworden. Im Schnitt hat man bei der Generierung von Thumbnails die Möglichkeit noch 5% der Größe einzusparen.

Ich nutze für diese Analysen meist GTMetrix. Wie man bei der Analyse des Demo Shops sehen kann, liegen wir dort im Schnitt bei 5,2% (als Referenz wurde ein Kategorielisting genutzt)

Die Frage ist nun, warum fehlen dort 5% der verlustfreien Komprimierung? Die Frage kann vermutlich nur ein Entwickler von Shopware beantworten oder es gibt bereits ein Feature oder Pull Request. Bis dahin kann man sich aber einfach der Komprimierung mit der CLI Console von Shopware bedienen.

Der Befehl dazu lautet: sw:media:optimize

Und wird wie üblich mit php bin/shopware  aufgerufen. Wir verschaffen uns aber erst einmal einen Überblick über die Funktionsweise, da diese leider nicht in der aktuellen Dokumentation vorhanden ist. Übrigens ist diese Funktion ab der Shopware Version 5.2.17 verfügbar. Ich empfehle aber die 5.2.18 zu laden, da diese einen „möglichen“ Fehler der Schreibrechte fixt.

$ php bin/console sw:media:optimize --help

Usage:
 sw:media:optimize [options] [--] [<path>]

Arguments:
 path Path to your media folder

Options:
 -i, --info Display available tools
 --skip-scan Skips the initial filesystem scan.
 -m, --modified=MODIFIED Limits the files modify date to the provided time string.
 -h, --help Display this help message
 -q, --quiet Do not output any message
 -V, --version Display this application version
 --ansi Force ANSI output
 --no-ansi Disable ANSI output
 -n, --no-interaction Do not ask any interactive question
 -s, --shell Launch the shell.
 --process-isolation Launch commands from shell as a separate process.
 -e, --env=ENV The Environment name. [default: "production"]
 -v|vv|vvv, --verbose Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

Help:
 The sw:media:optimize optimizes your uploaded media using external tools. You can check the availability using the --info option.

Wir schauen also erstmal auf unserer VM (Shopware mit Vagrant nutzen), ob ein solches Tool schon installiert ist.

$ php bin/console sw:media:optimize --info

Leider ist dies nicht der Fall

+-----------+----------+-----------------------+
| Optimizer | Runnable | Supported mime-types |
+-----------+----------+-----------------------+
| jpegoptim | No | image/jpeg, image/jpg |
| pngout | No | image/png |
| optipng | No | image/png |
| jpegtran | No | image/jpeg, image/jpg |
| pngcrush | No | image/png |
+-----------+----------+-----------------------+

Das können wir aber schnell ändern, indem wir uns über SSH auf unsere VM einloggen.

$ vagrant ssh

und dort folgenden Befehl ausführen:

sudo apt-get install jpegoptim

Nun haben wir bei jpegotim ein Yes stehen und wir können uns einen Ordner für die Komprimierung auswählen. Um einen Vorher/Nachher Effekt zu sehen, lasse ich mir vorab die Gesamtgröße des /media/image Order ausgeben.

$ du -sh media/image/

Im Falle der Shopware Demo Installation haben wir eine Größe von 286MB vor der verlustfreien Komprimierung.

Nun führen wir die verlustfreie Komprimierung mit jpegoptim aus

$ php bin/console sw:media:optimize media/image/

Praktisch ist der Fortschrittsbalken. In unserem Fall war dieser nach ca. 2 Minuten auf 100% und wir haben eine Größe von 261MB – damit also eine Ersparnis von 25MB! Damit sparen wir also im Durchschnitt 8,7% und das verlustfrei.

Dies mag für den ein oder anderen nicht besonders viel sein – gerade in Zeiten von VDSL und immer besseren LTE+ Netzen. Allerdings nutzen in Deutschland immer noch sehr viele Menschen das langsame Edge Netz oder teilen sich einen DSL Anschluss im Haus. Gerade im Bereich E-Commerce zählt jede hundertstel Sekunde um eine bestmögliche Konversion zu erreichen.