Bilder im Hintergrund in WebP und AVIF konvertieren

Sie können unser Plugin über den Shopware Store beziehen:
https://store.shopware.com/de/memod97197147652m/bilder-im-hintergrund-in-webp-und-avif-konvertieren.html

Systemanforderungen

Prozessoren

Im Plugin gibt es 2 Prozessoren für die Bilder.

1. GD:

Wenn GD im Einsatz ist kann es sein, dass AVIF nicht unterstützt wird.
Wir verwenden imageavif dafür.
https://www.php.net/manual/de/function.imageavif.php
Das müsste ab PHP 8.1 verfügbar sein, wenn libavif auf dem System vorhanden ist.

2. Imagick (unsere Empfehlung):

Imagick hat in der Version 6 und jünger noch ein Problem mit AVIF Bildern mit transparenz.
Ab Imagick 7 geht das aber wie gewünscht.
Unter Imagick 6 ignorieren wir einfach transparente Bilder bei der Konvertierung.

Scheduled Tasks

Unser Plugin setzt die Scheduled Tasks von Shopware voraus.
Ohne diese ist es nicht möglich Hintergrundtasks auszuführen.

https://developer.shopware.com/docs/guides/hosting/infrastructure/scheduled-task.html

Flysystem

Aus Performancegründen haben wir uns dagegen entschieden das Shopware Filesystem (Flysystem) zu verwenden.
Daher ist unser Plugin nur mit einer regulären Shopware Installation kompatibel. Eine Abfrage für alle Dateien wäre in einem an Sharepoint, Dropbox, usw. angebundenem System nicht effizient genug.

Erste Installation

Plugin installieren und aktivieren
Plugin nach Wunsch konfigurieren (Verlustfrei / Qualität, siehe Dokumentation unten)
Empfehlung: Alle WebP initial manuell auf der Konsole generieren (./bin/console memo:webp:generate)

Einstellungen

Maximale Anzahl an generierten Bilder pro Stunde

Definiert wieviele Bilder durch den Taskrunner pro Stunde generiert werden können, um das System nicht zu überlasten.
Wenn der CLI Befehl verwendet wird, wir diese Einstellung ignoriert.

Ohne Verlust komprimieren

Da haben wir die Erfahrung gemacht, dass die Bilder teils am Ende noch grösser sind als z.B. unter JPG.
Das hat damit zu tun, dass AVIF und WebP sehr stark in der Komprimierung sind, aber nicht für den lossless Bereich gedacht sind.

Verwendung von GD erzwingen

Falls vorhanden verwendet unser Plugin immer Imagick.
Als Fallback verwenden wir GD. Mittels dieser Einstellung wird diese Logik übersprungen und immer GD verwendet.

Speicher Limit für Imagick in MB

Hier kann das RAM Limit definiert werden.
Wir haben die Erfahrung gemacht, dass einige Hoster sehr aggressive Taskkiller im Einsatz haben.
Dadurch kann der RAM Verbrauch niedrig gehalten werden, was den Taskkiller davon abhält unsere Bildergenerierung zu killen.

Kompressionsqualität WebP / AVIF:

Zahl zwischen 1 und 100.
100 wäre dann lossless.
Wir empfehlen für WebP 50 und für Avif 20.
Das kommt aber ganz auf die Bilder im Shop an. Einige Shops profitieren von höhere Auflösungen.
In dem Fall würde sich 80 und 40 als Einstellung anbieten.

Geschwindigkeit der AVIF Komprimierung:

Zahl zwischen 0 und 10.
AVIF kann das gleiche Bilder unterschiedlich stark komprimieren.
Umso höher die Zahl ist umso schneller wird die Konvertierung abgeschlossen, dafür ist die resultierende Dateigrösse allerdings auch grösser.
Das kommt ganz auf die Anzahl Bilder im Shop und auf die Leistung des Servers an.
2 ist eine recht aggressive Einstellung um eine guten Komprimierung zu erreichen.

Pfad für temporäre Dateien für Imagick:

Imagick legt während der Komprimierung temporäre Dateien in den /tmp Ordner.
Das ist meistens kein Problem. Uns ist allerdings auf ein paar Hostings aufgefallen, dass die tmp Partition vollgelaufen ist, weil Imagick Dateien angelegt hat und dann der Task von einem Taskkiller abgeschossen wurde.
Dadurch wurden die Temporären Dateien nie bereinigt.
Wenn hier ein absoluter Pfad gesetzt wird, dann speichert Imagick die Dateien dort rein.
Dadurch kann das Problem umgangen werden.

Konsolen Befehle

Mit dem Befehl bin/console memo:webp:generate können die Bilder sofort und ohne Scheduled Task erstellt werden.
Es gibt auch die Option async also bin/console memo:webp:generate -a um die Bilder über die Message Queue zu verarbeiten.
Die Bilder werden nicht jedes mal komplett neu konvertiert, das System erkennt, ob Bilder bereits konvertiert wurden und überspringt diese.

Bei diesem Befehl werden die Bilder synchron abgearbeitet.
Die bestehenden Ordner werden verglichen und fehlende Dateien werden

Mögliche Probleme

WebP Bilder werden nicht ausgegeben

Hier gibt es mehrere Auslöser. Zuerst kann geprüft werden, ob im Frontend bei den Bildern ein Picture Tag ausgegeben wird.

Falls der Picture Tag nicht ausgegeben wird ist es möglich, dass das eingesetzte Theme oder ein Plugin die folgende Datei überschreibt:
Resources/views/storefront/utilities/thumbnail.html.twig

Bitte prüfen Sie die installierten Plugins und, falls dies der Fall ist, übernehmen Sie die Anpassungen unseres Plugins in Ihr Theme.

Für Bilder mit Transparenz werden keine AVIF Dateien generiert

Imagick unterstützt AVIF mit Transparenz erst ab der Version 7.
Sollte das Plugin eine jüngere Version erkennen prüft unser Plugin zuerst, ob das Bild eine transparente Ebene besitzt.
Falls ja wird dieses Bild bei der Konvertierung übersprungen.

Welche Imagick Version Sie verwenden finden Sie ganz einfach auf Ihrem Server mit folgendem Befehl heraus:
php -r "print_r(\\Imagick::getVersion()['versionString']);"

Logs

Das Plugin logt Fehler beim Konvertieren in das reguläre Logfile unter var/logs/...

Häufige Fragen

Q: Wie kann ich alle Bilder neu generieren?

Verwenden Sie den Button "Alte Bilder neu generieren" in den Plugineinstellungen.

Beim nächsten Durchlauf werden alle alten Bilder neu erstellt und überschrieben.
Unter Umständen kann es Sinn machen danach mit der CLI alle Bilder neu zu generieren (./bin/console memo:webp:generate)

Q: Wo werden die Daten gespeichert?

Die Daten werden auf Ihrem Server im Ordner public gespeichert.
Die AVIF Bilder finden Sie unter public/avif/media (Bilder in voller Auflösung) & public/avif/thumbnail (Thumbnails / von Shopware verringerte Auflösungen).
Die WebP Bilder finden Sie unter public/webp/media & public/webp/thumbnail.

Q: Wieso sehe ich keine WebP Bilder?

Prüfen Sie zuerst, ob im Frontend der Picture Tag angezeigt wird.
Falls nicht prüfen Sie, ob Sie in Ihrem Theme die Datei Resources/views/storefront/utilities/thumbnail.html.twig überschreiben.

Falls der Picture Tag vorhanden ist, aber das Bild dennoch nicht im WebP Format ausgegeben wird führen Sie den Befehl ./bin/console memo:webp:generate und prüfen den Output auf Fehler.

Falls im Output keine Fehler vorhanden sind ist es möglich, dass Sie die Scheduled Tasks nicht korrekt eingerichtet haben.

Bitte prüfen Sie auch, ob Ihr Shop den Systemanforderungen entspricht.

Q: Wie kann ich nur einen Teil neu generieren (z.B. nur die AVIF Thumbnails)

Wenn Sie die Dateien auf dem Server löschen werden diese beim nächsten Durchlauf neu konvertiert.
In welchen Ordnern die Bilder gespeichert werden können Sie oben sehen.

Wichtig: Bereinigen Sie den Shop Cache danach. Shopware speichert die WebP Pfade zwischen und es kommt zu 404 Fehlern, wenn Sie den Cache nicht leeren.

Sie haben noch weitere Fragen?

Wenn wir Ihr Anliegen hier nicht lösen konnten, können Sie sich gerne natürlich auch an unseren Support wenden.
Wir werden Ihnen so schnell wie möglich dabei helfen Ihre Fragen zu klären.

Sie können ein Ticket über Ihren Shopware Account erstellen oder bei uns ein direktes Ticket über eine Mail an support@mediamotion.ch eröffnen.

Bitte nennen Sie uns bereits beim Erstellen des Tickets Ihre aktuelle Shopware Version und Ihre Pluginversion.