Welche Thumbnailgrößen sollte man erstellen lassen?

Shopware 6 (German)
1

Shopware zeigt mit dem Standardtheme bei rechteckigen Bildern folgende Thumbnails:

  • 200 x 200 Pixel große Bilder auf Kategorieseiten
  • 430 x 430 Pixel große Bilder auf Produktdetailsseiten
  • 55,1667 x 55,1667 Pixel große Bilder auf Produktdetailsseiten, wenn mehrere Bilder angelegt sind

Also sollte man Thumbnails in 200 x 200, 430 x 430 und 56 x 56 Pixel große Bilder als Thumbnails anlegen, oder?

Und zusätzlich die kostenlose Erweiterung LazySizes und LazyLoading für passende Bilder-Sizes | Shopware Store installieren, damit Shopware die richtigen Thumbnailgrößen ausliefert?

Wenn man beide Sachen nicht macht, liefert Shopware viel zu große Bilder aus und sorgt so für schlechte Ladezeiten.

Welche Thumbnailgrößen sollte man in Shopware haben?

2

Thumbnails werden generiert:

Hier würde ich gar nichts ändern. Wir speichern die Originalbilder in 1200x1200 Pixel in WebP (umgewandelt direkt auf dem Webserver) ab. Gibt keine Performanceprobleme bei uns. Keine Erweiterungen für LazyLoading oder ähnliches ist installiert.

Nenne mal deine Webseite. Vielleicht ist der Webserver auch zu langsam oder am Theme wurde rumgeschraubt diesbezüglich? Wie groß (mb, kb) sind denn die Originalbilder und die Thumbnails bei dir?

3

1200 x 1200 Pixel ist relativ klein für Originalbilder. Die Besucher wollen oft Details genau sehen.

Im Standard lädt Shopware für die Thumbnails größere Bilder, als es anzeigt.

Das erhöht die Ladezeit. Das kannst du leicht mit https://www.webpagetest.org/, https://pagespeed.web.dev/ und den Entwicklertools in Browsern sehen.

Die Erweiterung LazySizes und LazyLoading für passende Bilder-Sizes | Shopware Store sorgt dafür, dass die besser passenden Thumbnails ausgeliefert werden.

Damit es noch besser passt, muss man auch Thumbnails erstellen, die zur angegebenen Bildgröße passen.

1 „Gefällt mir“
4

Wir haben uns am Ende für 3 Formate entschieden - bis 1600px, bis 800px und bis 400px.
Die Proportionen sollten natürlich eurem Theme und euren Einstellungen angepasst sein.

200, 56 usw. erachte ich für unnötig. Wir reden hier über einige wenige KB unterschied wenn man die Bilder richtig komprimiert. Da macht es nicht viel aus wenn der 56er die 200er Bilder nimmt.

Achtung: Alle Thumbnails natürlich neu generieren sobald man die Einstellungen in den Medien vorgenommen hat.

5

Wenn die kleinsten Thumbnails 400 x 400 Pixel haben, nimmt Shopware für die 55,1667 x 55,1667 und 200 x 200 Pixel großen Thumbnails die Thumbnails mit 400 x 400 Pixel.

Das ist Blödsinn, weil es die Ladezeit stark erhöht und den Server stärker belastet.

Teste mal in einem Testshop die Erweiterung und die kleineren Thumbnails und überprüf die Werte mit den oben genannten Werkzeugen.

6

Im Listing stellen wir die Thumbnails in 330 x 208 Pixel, in der PDS in 596 x 596 Pixel und in der Vollansicht in 642 x 642 Pixel dar. Also 1200 x 1200 Pixel sind bei uns mehr als ausreichend. Wenn wir Details von einem Bild dargestellen wollen, erstellen wir mehrere Bilder und machen Detailaufnahmen von der Stelle des Produkts, was interessant ist.

Bis Ende letztes Jahres haben wir diese sogar nur in 1000 x 1000 Pixel hochgeladen.

Bei uns:
Pagespeed Mobil Leistung: 61
Pagespeed Desktop Leistung: 88

7

@raymond-de welches Theme verwendest du? Das sind nicht die Werte vom Standardtheme.

Hast du die Erweiterung und genau solche Thumbnailgrößen getestet?

Bei diesen Werten ist, vor allem bei Mobilgeräten, eine erkennbare Beschleunigung der Ladegeschwindigkeit möglich.

8

Mal rein aus Interesse: nutzt ihr Tools zum komprimieren der Bilder bevor ihr die bei Shopware hochlädt? Welche Tools?

9

Wir nutzen unter linux cwebp zum Umwandeln von jpg in webp. Zukünftig convert zum Umwandeln von jpg in avif.