Bildoptimierung in Shopware: AVIF & WebP im Vergleich

Im Rahmen eines Shopware-Projekts haben wir uns intensiv mit dem Thema Bildkomprimierung beschäftigt. Konkret: Wie lassen sich große Bildmengen, zum Beispiel auf der Startseite, deutlich verkleinern, ohne dass die Qualität sichtbar leidet?

Dazu haben wir im Testshop ein (kostenpflichtiges) WebP/AVIF-Plugin installiert und die Bilder mit den Standard-Einstellungen konvertieren lassen (WebP 60 / AVIF 20).

Wichtig zu wissen: Die AVIF-Konvertierung ist deutlich rechenintensiver als WebP. Bei unserer Bildmenge hat der Vorgang rund 12 Stunden gedauert.

Erkenntnisse bisher

• Der Browser entscheidet selbst: AVIF, wenn unterstützt, sonst WebP, sonst fallback JPG

• AVIF bringt kleinere Dateien, zeigt aber bei zu starker Komprimierung sichtbare Artefakte

• WebP ist viel größer

Erster Testlauf

• Mit den Standardwerten (WebP 60 / AVIF 20) konnte die Datenmenge auf der Startseite von ca. 35 MB auf 12 MB reduziert werden

• Bei AVIF 20 sind allerdings teilweise sichtbare Artefakte erkennbar – vor allem bei hochauflösenden Motiven

Skalierungsvergleich mit echten Shop-Bildern

Um die optimale Einstellung zu finden, haben wir sechs typische Shop-Bilder in verschiedenen Komprimierungsstufen als AVIF und WebP konvertiert. Für jede Variante wurden die Qualitätsstufe und die resultierende Dateigröße verglichen.

Nächster Schritt

Aktuell testen wir die Kombination WebP 50 und AVIF 30. Diese Werte entsprechen auch gängigen Empfehlungen, kleiner als JPG, aber ohne sichtbare Verluste.

Ob sich die 12 MB von der Startseite damit noch weiter reduzieren lassen, klärt der nächste Testlauf.

Endergebnis: Kompakt & scharf

In unserem konkreten Fall mussten wir die AVIF-Komprimierung letztlich auf Qualität 50 anheben, niedrigere Werte führten zu sichtbaren Artefakten, die für unsere Produktdarstellung nicht akzeptabel waren. Durch die gezielte Reduktion unnötiger oder zu großer Bilder liegt die Datenmenge der Startseite nun bei nur 7,2 MB - ein hervorragender Wert im Vergleich zur ursprünglichen Ausgangssituation.