Auflösung der Bilder in Einkaufswelten (Responsive Ansichten) zu groß

Hallo zusammen,

gibt es eine Möglichkeit, dass Shopware die “korrekte” Thumbnail-Größe in den Einkaufswelten verwendet. Geht vorrangig um die Artikel-Slider.

Google Pagespeed meckert mir in der Mobil-Version (völlig zurück meiner Meinung nach) an, dass einige Bilder zu groß sind. Nur verstehe ich auch nicht, warum auf die 1280x1280 Thumbnails zugegriffen wird. In der letzten Zeile sieht man, dass bei einem Artikel korrekt die 200x200px Version verwendet wird.

Könnt ihr mir hier helfen?

Hey,

Du gehst auf die Medienverwaltung. Dann auf das Bilderalbum auf das Zahnrad für Einstellungen und dann kannst Du für jedes Album die Thumbnails neu generieren.

Das ist mir schon klar. Nur werden weiterhin die „großen“ Thumbnails angezogen.

Beispiel aus Google Pagespeed:

Nur ist das nicht bei allen Bildern so und ich habe keine Ahnung woran das liegt, bzw. wie hier das „Vorgehen“ des Shopware-Shops ist welche Bilder ausgeliefert werden.

Hi, wir haben das gleiche Problem. Google Pagespeed bemängelt zu große Bilder. Ich habe dazu folgendes gefunden. Sollte sich das bewahrheiten, wie geht google damit um?

Die schlechten Werte lassen sich auch im Demo Store nachvollziehen. Google wird bestimmt auch nicht mit zwei Algorithmen arbeiten sondern genau diese Werte ins Ranking mit einfließen lassen. Ich lasse mich gerne auch eines besseren belehren. Ideas Anyone`?

Hallo,

zu dem Bilderdilemma gibt es schon etliche Posts ohne Lösung. Zu dienem konkreten, habe ich hier schon mal was gefragt/geschrieben: https://forum.shopware.com/discussion/41495/startseite-mit-5-mb-unsinnige-groesse-der-thumbnails/p1

Es ist definitiv so, dass in der mobilen Version die Produktslider zur schlechten Bewertung durch Google führen. Bisher habe ich den Fehler bei den Speichergrößen der Thumbnails gesucht und dabei festgestellt, dass die TN mit _1280x1280.jpg immer eine größere Speichergröße haben als die Originaldatei, selbst wenn die Originaldatei schon mit 1280x1280 pixeln hochgeladen wurde.

Wenn allerdings in den Slidern die falschen TNs verwendet werden, ist das ein weiteres Problem. Welche TNs wo verwendet werden sollen, weiß ich allerdings nicht.

Ein Test bei dem Artikelslider der Desktopversion zeigt bei mir :

Wird da jetzt 200 oder 1280 verwendet? Bei der mobilen Version kann ich es nicht prüfen, da ich da die Slider rausgenommen habe aufgrund des Problems. Das kann aber auch kein Dauerzustand sein.

Die Auswirkungen der Slider in der mobilen Version sind enorm. Allerdings wird auch bei der Desktopversion an den TNs gemeckert, dort geht es aber um die EKW-Banner und nicht um die Slider.

Welche Thumbnails sollten wo verwendet werden? Falsche Verwendung ließe sich wohl nur über das Template korrigieren. Da hier alle Shops betroffen sein müssten, die nicht selbst schon an dieser Stelle Änderungen vorgenommen haben, sollte das doch von SW zu korrigieren sein oder sehe ich das falsch?

Übrigens gibt es auch schon einen älteren Post zu der von dir angesprochenen Problematik… ich gehe mal auf die Suche…

LG

 

Hi,

bei mir stellt sich der Code genau so dar.

Ich habe in der Mobile Ansicht 2 Produktslider. Das eine Bild hat eine Größe von 203 x 203px, das andere von 67 x 67px.

Die Datei, die dafür in beiden Fällen verwendet wird, ist jeweils die „1280x1280@2x.jpg“ . Das ist einfach nur krank. Ich habe einen Pagespeed von 31 im Mobile und werde auf rot gesetzt.

Für mich ist es ehrlich gesagt auch schwer zu kapieren, da der Code ja oben mit img src auf das 200x200 Thumbnail zeigt?

Bei den Artikeldetailseiten hingegen ist alles ok. Ich werde also wohl die Produktslider rauslöschen. Von Shopware ist zu dem Thema ja offenbar nichts zu erwarten. Ich verstehe auch nicht, warum dies nicht von Shopware behandelt wird, es ist doch offensichtlich, dass die Verwendung dieser Bilder total Banane ist.

Hi ROKAStore,

die Aussage stimmt so nicht. Da sind einige Optimierungen in der Umsetzung, welche voraussichtlich aber nicht mit einem Patch-Update kommen, sondern mit einem etwas größeren Update. Da sind wir definitiv aber dran.

Eigentlich soll aber ein derart großes Bild natürlich nicht geladen werden. Kannst du mir da ein paar Details schicken? Also getroffene Einstellungen, Art des Sliders etc.

Danke

Sebastian

1 Like

Hallo Sebastian,

wenn ich eine 3- oder 4-spaltige EKW anlege und dort das Element Artikelslider einfüge, werden bei diesem in der Mobilen Ansicht die 1280er herangezogen und für zu groß moniert - wie ROKAStore ebenfalls schreibt.

Den gleichen Effekt haben jedoch auch Einzelartikel, wie ich am Wochenende festgestellt habe. Wenn ich 2 Artikel als Element einfüge, werden die beiden Produktbilder-TN 1280 moniert. Das wirkt sich im Gesamtergebnis nicht so stark bei pagespeed aus, weil es eben nur 2 sind und man schafft es noch in den gelben Bereich.

Bei einem Slider z.B. mit Kategorie oder neusten Produkten sind es aufgrund der Menge der Artikel viele Produktbilder und man ist im roten Bereich.

Ich verwende hier alles original SW, habe keine eigenen TN o.ä. eingerichtet.

Wenn du möchtest, kann ich dir zu dem Fall mit den 2 Artikeln einen Link zu meiner EKW schicken. Zu den Slidern habe ich kein Beispiel mehr, da ich sie in der mobilen Version löschen musste aufgrund des Rotstatus bei Google.

Anmerkung am Rande: Was den Pagespeed der Seite angeht, macht es einen Unterschied, ob ich ein Element für eine bestimmte Ansicht nur ausblende oder lösche. Deaktiviere ich den Artikelslider in der Mobilansicht, wird er von Google trotzdem geladen und bewertet. Erst nach Löschen verschwinden die Fehler und die Bewertung sieht anders aus.

 

" Da sind einige Optimierungen in der Umsetzung, welche voraussichtlich aber nicht mit einem Patch-Update kommen, sondern mit einem etwas größeren Update. "

Diese Aussage seitens Shopware hätte mir bei den früheren Posts zu diesem Thema schon sehr weitergeholfen und mich etwas hoffen lassen .-) Ich mache seit Wochen meinen Doktor an dieser Bildergeschichte und fülle das Forum mit Beiträgen.

1 Like

Hallo Sebastian et al.,

gibt es zu dem Thema schon was Neues? Mein Pagespeed ist immer noch grottig. Ansonsten lösche ich jetzt die Einkaufswelten im Mobile Bereich.

 

Ich glaube nicht. Inzwischen habe ich bei den EKW keine Artikel mehr, sondern nur noch Banner die mind. über 2 Felder reichen, da wurde es etwas besser. Desktop gelb und Mobile immer noch rot aber 61/100. Deutlich mehr als mit Artikeln.

1 Like

Da bist Du ja noch gut im Rennen, ich liege Mobile bei 32/100 im Pagespeed, das rot ist so tief wie das eines Toreros beim Stierkampf.

So, im neuen Update 5.2.22 scheint das Problem angegangen worden zu sein, ich bin gespannt!

Da habe ich doch schnell mal getestet und stelle fest: Problem nicht gelöst!

Startseite mit 6 Artikeln (einzeln kein Slider)

Vor Update:

Artikelbilder wurden mit 1280x1280 herangezogen, jeweils 98% zu groß. In Summe könnten bei den Bildern 60% eingespart werden.

Nach dem Update:

Artikelbilder werden mit 600x600 herangezogen, jeweils 97/98% zu groß. In Summe könnten 58% eingespart werden.

 

Im Ticket Shopware Issuetracker ist es richtig beschrieben. Umgesetzt aber scheinbar nicht.

Jemand andere Erkenntnisse?

Moin Toric,

das Ticket behandelt, wie du sicher weißt, ausschließlich den Artikel-Slider, für den nur noch 200x200 Thumbnails ausgeliefert werden, weil die einzelnen Produktbilder im Slider je nach Größe des Elements eben nicht größer werden. Und das funktioniert auch, das kannst Du nachvollziehen, in dem Du die Einkaufswelt mit geöffnetem Debugger lädtst und im Bereich Network schaust, welche Bilder der Browser lädt.

Du nutzt ganz normale Artikelboxen, für die die ganz normale Logik greift: Es wird dem Browser mitgeteilt, welche Bilder vorhanden sind und es wird dem Browser mitgeteilt, wie groß das Element ist, anhand dieser Informationen entscheidet der Browser, welches der Thumbnails er lädt. Wenn das Element nun 220px breit ist, wählt der Browser das 600x600 Thumbnail, weil das 200x200 eben zu klein ist. Das kannst Du aber nur umgehen, indem Du deutlich mehr Thumbnailgrößen implementierst, was anderswo auch wieder nachteile hat (Speicherverbrauch zum Beispiel)

Zum Thema Pagespeed: Bitte hier immer den genauen Wortlaut lesen und verstehen. Oft bemängelt Google nicht die Auflösung der Bilder, sondern dessen Dateigröße, Google will also, dass Du Deine Bilder komprimierst (Qualität verringerst). Wenn Du dein Bild nun auf 30% seiner ursprünglichen Dateigröße komprimierst, ist Google zwar happy, weil sie weniger Daten übertragen müssen, aber dann sehen die Bilder für deine Besucher halt kacke aus (Artefakte uws). Du darfst dich hier nun entscheiden, welchen Weg Du gehen willst. Mit der Media-Optimierung strippen wir aus den Bildern schon unnötige Daten heraus und verringern die Dateigröße, jedoch ohne die Bilder zu komprimieren, die Bildqualität bleibt also erhalten.

_

Viele Grüße aus Schöppingen

Nein, mehr “Thumbnailgrößen” helfen eben nicht, da “1” bis “3” von Shopware für das Theme vorgegeben werden. Kleinere müsste man also hinten in der Liste anhängen. Diese würden in der Liste dem Browser auch am Ende zugewiesen werden. Tests mit Chrome und Firefox haben aber ergeben, dass die Listen nicht bis “hinten” abgearbeitet werden und der Browser den ersten größeren “Treffer” nimmt, und somit garnicht bis zu einer “Zwischengröße” weiter hinten in der Liste gelangt. Würde Shopware die Liste zunächst nach “Größe” Sortieren, ehe sie dem Browser im Set angeboten wird, wäre das was anderes. Doch trotz diverser Tickets und ausführlicher Forenbeiträge hat sich Shopware eben mal wieder nicht inhaltlich der Problematik gestellt, wie bei 99% der Tickets im Issuetracker. Lieber immer was neues für Enterprise-Kunden, als endlich mal die rumgeschleppten Probleme zu beseitigen.

Ich sagte auch implementieren, nicht einfach im Media-Manager neue Thumbnail-Größen hinzufügen. Das ist schon was anderes. :slight_smile: Und das Problem aus diesem Ticket wurde gelöst, da es nur um die angezeigten Thumbnails des Artikel-Sliders ging und um nichts sonst.

_

Viele Grüße aus Schöppingen

Hallo Patrick,

soweit würde ich das verstehen - eigentlicht :slight_smile:

Aber: Ich habe jetzt heute morgen Pagespeed geöffnet, Startseite getestet, TN 1280x1280 wurden bei den Artikelboxen herangezogen. Dann habe ich das Update gemacht und Pagespeed in einem neuen Browserfester geöffent und erneut getestet. Jetzt werden die 600er TN herangezogen. Wenn die Änderung sich nur auf die Slider bezieht, hätte hier nach dem Update doch eigentlich gar keine Änderung zu sehen sein sollen oder?

Letzter Absatz bzgl. Dateigröße und Komprimierung ist schon klar. Die 200er TN wäre eben deutlich kleiner.

In dem hier getesteten Shop habe ich nun keine weiteren Testmöglichkeiten. Beim großen warte ich erstmal ab, ob das Update noch Kinderkrankheiten hat :slight_smile:

LG

Ich hab gerade nochmal in die Änderungen reingeschaut, da wurde an der Logik geschruabt, da ich aber kein Entwickler bin, kann ich dir nicht genau sagen, welche Änderungen das nun genau bewirkt, was ich dir aber sagen kann ist, dass die Komponente, die geändert wurde, sowohl für die Artikelbox, als auch für den Slider zuständig ist. Kann durchaus sein, dass ein anderes Ticket hier nochmals Hand angelegt hat oder doch eine Änderung drin ist, die ich so nicht interpretieren kann. Die Frage ist nun, welches Bild für Deine EKW korrekt ist, da nun ein kleineres Bild geladen wird, gehe ich erstmal davon aus, dass das positiv ist, weil ein 1280er unnötig ist, weil Deine Artikelbox sicherlich nicht so groß ist, dass es das Bild bräuchte?! Das müsste man sich mal im Detail auseinanderpflücken.

_

Viele Grüße aus Schöppingen

Ich habe das ebenfalls gerade getestet und bei meiner Startseite werden nun richtigerweise in den Produktboxen die korrekten Produktbilder herangezogen. Es scheint hier auf jeden Fall auch eine Änderung gegeben zu haben. So wäre es zumindest für mich jetzt korrekt :slight_smile:

 

@Toric‍

Um welchen Shop geht es denn? Dann kann man das ja relativ schnell sehen. Wahrscheinlich ist dein Artikel-Element halt einfach größer als 200px und daher wird nunmal das 600er Thumbnail genommen. Wenn du da einmal die Domain rüberschickst, kann man das sicherlich schnell aufklären.