# Einkaufswelten / Bilder optimieren **URL:** \ **Category:** Themes & Design\ **Created:** [20. November 2017 um 13:18 UTC](https://forum.shopware.com/t/einkaufswelten-bilder-optimieren/49586 "2017-11-20T13:18:12Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![RomanW](https://avatars.discourse-cdn.com/v4/letter/r/57b2e6/32.png) [@RomanW](https://forum.shopware.com/u/RomanW)\ **Post date:** [20. November 2017 um 13:18 UTC](https://forum.shopware.com/t/einkaufswelten-bilder-optimieren/49586/1 "2017-11-20T13:18:12Z")
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    ---
**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\ **Post date:** [20. November 2017 um 13:51 UTC](https://forum.shopware.com/t/einkaufswelten-bilder-optimieren/49586/2 "2017-11-20T13:51:00Z")
Du kannst passendere Thumbnailgrößen einstellen und generieren. ---
**Author:** ![RomanW](https://avatars.discourse-cdn.com/v4/letter/r/57b2e6/32.png) [@RomanW](https://forum.shopware.com/u/RomanW)\ **Post date:** [20. November 2017 um 14:24 UTC](https://forum.shopware.com/t/einkaufswelten-bilder-optimieren/49586/3 "2017-11-20T14:24:01Z")
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 ```   ---
**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\ **Post date:** [20. November 2017 um 14:43 UTC](https://forum.shopware.com/t/einkaufswelten-bilder-optimieren/49586/4 "2017-11-20T14:43:41Z")
Und was bedeutet das für Dich? ---
**Author:** ![RomanW](https://avatars.discourse-cdn.com/v4/letter/r/57b2e6/32.png) [@RomanW](https://forum.shopware.com/u/RomanW)\ **Post date:** [20. November 2017 um 15:05 UTC](https://forum.shopware.com/t/einkaufswelten-bilder-optimieren/49586/5 "2017-11-20T15:05:51Z")
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'); } } ```   ---
**Author:** ![BestShopPossible](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@BestShopPossible](https://forum.shopware.com/u/BestShopPossible)\ **Post date:** [20. November 2017 um 15:23 UTC](https://forum.shopware.com/t/einkaufswelten-bilder-optimieren/49586/6 "2017-11-20T15:23:38Z")
> [@NextMike schrieb:](https://forum.shopware.com/profile/19433/NextMike "NextMike") > > Du kannst passendere Thumbnailgrößen einstellen und generieren. ---
**Author:** ![RomanW](https://avatars.discourse-cdn.com/v4/letter/r/57b2e6/32.png) [@RomanW](https://forum.shopware.com/u/RomanW)\ **Post date:** [20. November 2017 um 20:42 UTC](https://forum.shopware.com/t/einkaufswelten-bilder-optimieren/49586/7 "2017-11-20T20:42:57Z")
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. ---
**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\ **Post date:** [21. November 2017 um 08:47 UTC](https://forum.shopware.com/t/einkaufswelten-bilder-optimieren/49586/8 "2017-11-21T08:47:20Z")
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.