Bilder / Thumbnails srcset Probleme

Shopware 6 (German) Allgemein
1

Mir erschließt sich nicht die Logik der Produktbilder in den Kategorieübersichten.

Ich habe unter Medien den Bilderordner für die Produktbilder die Thumbnails aktiviert und die Größen aktiviert. Habe via CLI bin/console media:generate-media-types und bin/console media:generate-thumbnails ausgeführt und am Ende den Cache geleert. Die Thumbnails werden auch erzeugt.

Wenn ich jetzt in eine Kategorie im Frontend gehe und das Browserfenster Bildschirmfüllend (nicht Vollbildmodus) habe, wird weiterhin das Produktbild in der vollen Auflösung geladen. Hat also jemand zB ein 2000x2000px Bild hochgeladen, wird mir auch genau das, selbst ind er kleinen Produkt-Box geladen. Verkleinere ich mein Browserfenster, wird dann das 400x400px Bild geladen.  Das funktioniert bis 1920px, alles darüber wird immer das orginal Produktbild geladen, was bei meinem 27" Monitor dazu führt, dass immer das größte geladen wird. Muss man hoffen, dass die Kunden nur kleine Monitore haben? 

Ich verstehe, wie das mit den Browserviewports im Img-Tag funktioniert. Mir erschließet sich aber nicht der Sinn, warum man so ein kleines Produktbild jemals in voller Auflösung laden sollte. Wäre gut, wenn dass srcset für 1921w entfernt werden könnte.

Im Template sehe ich das nur leider nicht
/Storefront/Resources/views/storefront/component/product/card/box-standard.html.twig

{% sw_thumbnails 'product-image-thumbnails' with {
    media: cover,
    sizes: {
        'xs': '501px',
        'sm': '315px',
        'md': '427px',
        'lg': '333px',
        'xl': '284px'
    }
} %}

Auf der Produktdetailseite habe ich weiteren Spaß mit den Bilder, die Lupe, eine Javascript, läd jedesmal die Bilder neu runter. Hab dazu schonmal ein Ticket angelegt. Lokal wird im Testfall also jedesmal ein 1mb Produktbild geladen, wenn ich mit der Maus über das Produktbild komme.
https://issues.shopware.com/issues/NEXT-8010

2

Nagut, dann probiere ich es mal über ein Supportticket und warte da meine 3 Tage für eine mehr oder weniger hilfreiche Antwort…

3

@Exe‍ wäre sehr dankbar, wenn du deinen Outcome mit dem Support hier postest :slight_smile: Habe das selbe Problem.

4

Ich hab noch kein Ticket aufgemacht. Verspreche mir auch nicht zwingend eine hilfreiche Antwort. Bisher war keine der Supportantworten wirklich richtig nützlich für mich. Ich musste schon auf eine Antwort von SW 2 mal zurückantworten, was natürlich auch jedesmal wieder 3 Tage dauert, bis sie dann erkannt haben, dass es nicht so ist wie sie denken und ein Bug ist.

5

[@Marcel S](http://forum.shopware.com/profile/117/Marcel S „Marcel S“)‍ kannst du dazu eventuell etwas sagen oder einen Vorschlag zu einem Quickfix machen wie man die Thematik umgehen könnte? LG

6

Das srcset-Markup im Shopware-Template ist hier fehlerhaft. Wir haben auch das gleiche Problem und werden das nun in unserem abgeleiteten Theme fixen, da es nur unnötige Ladezeit und Serverlast verursacht, wenn in der Produktliste die Originalbilder statt der Thumbnails geladen werden.

7

@opalion‍,

kannst Du mir bitte sagen, wie du dein Fix gemacht hast.
Komischerweise habe ich auf der Artikelseite kein Problem.
Auf der Produkt Detailseite hingegen werden meine Bilder inkl. Thumbnails mit 1920 x 1920 px geladen wenn ich das richtig gesehen habe
und das wollen wir selbstverständlich ändern.

Vielen Dank im Voraus!
Gruß Daniel 

8

@DanielZiehfreund‍ Wir haben doch keinen Fix machen können, da das twig-Template, in dem die Thumbnails und das srcset-Markup generiert wird, nicht überschrieben werden kann. Zumindest nicht Teile davon sondern wenn nur die ganze Datei, was bei künftigen Shopware Updates natürlich nachteilig wäre.

Wir haben nun unsere größte Thumbnail-Größe von 1400x1400 auf 1920x1920 erhöht. Dadurch stellt Shopware auch im Produktlisting am Desktop bei Full-HD Auflösung nun die 400px Bilder dar und nicht mehr das Originalbild, was sonst ziemlich auf die Performance gegangen ist.

Dadurch steht im srcset bei sizes nun 1920 statt 1400, was den gewünschten Effekt generiert:

sizes="(max-width: 1920px) and (min-width: 1200px) 284px, …

1 „Gefällt mir“
9

@opalion‍,

vielen Dank für die Rückmeldung.
Kannst Du mir vielleicht noch sagen, an welcher Stelle genau ich die Anpassung machen muss?  Wink

Vielen Dank im Voraus!
Gruß Daniel

10

Hier mal ein Lösungsansatz: Shopware, Bildergröße und Thumbnails - keine Verkleinerung - #8 von m23