Einkaufswelten / Bilder optimieren

Shopware 5 Themes & Design
1

Hallo,

mir ist aufgefallen, dass in den Einkaufswelten Bilder oft sehr groß angezeigt werden.
Z.B: bei einer Fullscreen Einkaufswelt werden die Kategorie Teaser immer mit der maximalen Größe am Desktop ausgegeben - 1920px - obwohl die Anzeige mehrere Spalten hat und das Bild maximal 800px breit ist.

Konfig:
Einstellungen: Alle Devices freigeschaltet
Layout: Fluid / Responsive, 12Spalten 0 Zeilenabstand, Zeilenhöhe 100
Elemente: 3x Kategorie Teaser / Zeile, 2 Zeilen mit einem Vorgegebenen Bild

Die Bilder werden jetzt je mit der maximalen Größe geladen, da die Einkaufswelt das CSS inline reinschreibt und da bei Desktop Auflösung die größten verfügbaren Thumbnails nimmt.

Gibt es eine Möglichkeit die Bilder “besser” zu laden, damit sich z.b. Google Pagespeed nicht beschert, dass die Bilder nicht optimal sind…?

Danke,

Roman 

 

2

Du kannst passendere Thumbnailgrößen einstellen und generieren.

3

Danke, aber das wird nicht viel bringen, da der HTML Code der Seite folgendes ausgibt:

 #teaser--fccb3cdc9acc14a6e70a12f74560c026 {background-image: url('https://seite.de/media/image/thumbnail/bild_800x800.jpg');}@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {#teaser--fccb3cdc9acc14a6e70a12f74560c026 {background-image: url('https://seite.de/media/image/thumbnail/bild_800x800@2x.jpg');}}@media screen and (min-width: 48em) {#teaser--fccb3cdc9acc14a6e70a12f74560c026 {background-image: url('https://seite.de/media/image/thumbnail/bild_1280x1280.jpg');}}@media screen and (min-width: 48em) and (-webkit-min-device-pixel-ratio: 2),screen and (min-width: 48em) and (min-resolution: 192dpi) {#teaser--fccb3cdc9acc14a6e70a12f74560c026 {background-image: url('https://seite.de/media/image/thumbnail/bild_1280x1280@2x.jpg');}}@media screen and (min-width: 78.75em) {.is--fullscreen #teaser--fccb3cdc9acc14a6e70a12f74560c026 {background-image: url('https://seite.de/media/image/thumbnail/bild_1920x1920.jpg');}}@media screen and (min-width: 78.75em) and (-webkit-min-device-pixel-ratio: 2),screen and (min-width: 78.75em) and (min-resolution: 192dpi) {.is--fullscreen #teaser--fccb3cdc9acc14a6e70a12f74560c026 {background-image: url('https://seite.de/media/image/thumbnail/bild_1920x1920@2x.jpg');}}

                

                    
                    
                        
                            helme kinnbügel

 

4

Und was bedeutet das für Dich?

5

Das bedeutet, dass die Bilder in voller Größe geladen werden obwohl sie diese größe nie erreichen. Der Grund ist, dass das CSS inline gerendert wird und dabei die Größe der Bilder immer mit dem größten Thumbnail geladen werden (1920x1920). Google Pagespeed meint (zurecht) dass die Bilder nicht optimal sind, da die Anzeigegröße nur ca. 800x800 bei meinem Monitor ist. 
Kann man da was verbessern?

@media screen and (min-width: 78.75em) and (-webkit-min-device-pixel-ratio: 2),screen and (min-width: 78.75em) and (min-resolution: 192dpi) 
{
.is--fullscreen #teaser--fccb3cdc9acc14a6e70a12f74560c026 {
background-image: url('https://seite.de/media/image/thumbnail/bild_1920x1920@2x.jpg');
}
}

 

6

@NextMike schrieb:

Du kannst passendere Thumbnailgrößen einstellen und generieren.

7

Und wie bekomme ich diese Thumbnails geladen? Ich habe übrigens mehrere Größen eingestellt. Wäre für jeden Hinweis dankbar, wie ich die Anzeige einstellen kann. I  den Einkaufswelten hab ich dazu nichts gefunden.

8

Sobald man die Thumbnails erstellt und generiert hat, sollten sie dem Browser zur Verfügung gestellt werden. Als srcset im picture element oder im inline css. Der Browser entscheidet dann selbst, welches Bild dargestellt wird.