ich habe GooglePagespeed durchlaufen lassen und magere 56 Punkte in der Desktop Version und 62 in der Mobile Version erhalten, trotz NGINX.Nun meckert Pagespeed vor allem auch über die Bildgröße, bei einem Bild soll ich angeblich 94% (203kb!!!) sparen können. Nun habe ich das Artikelbild in einem Tab geöffnet und heruntergeladen, es ist aber nur 164kb groß und misst 720x539 Pixel.
Komischerweise befindet sich am Ende des Namens des Artikelbildes noch die Endung 1280x1280.jpg.
Nun ist 1280x1280 ja eine Thumbnailgröße, das Bild ist aber kleiner und wenn ich es herunterlade ist es nur 164kb groß und dann kann ich wohl kaum 203kb einsparen. Ich bin verwirrt, wo liegt hier das Problem?
Bei allen 4 Bildern, bei denen diese Meldung erscheint, handelt es sich übrigens um angezeigte Artikelbilder, bzw. verknüpften Artikeln auf der Startseite. Bei anderen Bildern habe ich das Problem nicht.
Der Quellcode beinhaltet ein Souceset aus mehreren Bildern und liefert je nach Endgerät immer die passenden Bilder aus. Wenn dein Endgerät jetzt ein Mobiles Gerät ist mit einer FHD-Auflösung, sollte das Template zB ein 1280x1280(@2x] ausliefern, sodass das Template die Bilder nie hochskalieren muss.
Das Problem bei PageSpeed ist, dass die mit maximal machbarer Komprimierung rechnen. Wenn du deine Bilder so weit runter komprimierst, wirst du wahrscheinlich einen sichtbaren Qualitätsverlust haben, ich hab das mal getestet, von meinem 806KB Bild will er 794KB einsparen. Also wenn ich ein 1280er Bild habe, was 10KB klein ist, wird das definitiv…nicht schön aussehen
Willst du Google happy machen, kannst du Plugins einsetzen und/oder Dienste nutzen, die die Thums weiter komprimieren, dann wird deine Seite schneller.
Willst du deine Kunden happy machen, dann lass es so, deine Seite wird dann nicht schneller, aber deine User sehen “hübsche” Bilder.
Danke Patrick.
Dass PageSpeed mit der machbaren Komprimierung übertreibt, habe ich mir schon gedacht.
Nur was ich immer noch nicht ganz verstehe, ist, wieso Pagespeed behauptet dass ich über 200kb einsparen kann, obwohl das Bild, wenn ich es herunterlade, nur 164kb groß ist?
Habe ich da nun etwas falsch gemacht oder stimmt das einfach nicht?
Das kommt darauf an, wie du die Bilder speicherst.
JPGs kannst du zum Beispiel mit bis zu 70% Qualität speichern, um das Bild zu komprimieren
Bei PNGs kannst du die Farbtiefe zB auf 8 Bit setzen, das spart bei PNGs massig Speicher, mehr Bits sehen nur die wenigsten User (weil die meisten Consumer Monitore eh nicht mehr darstellen können).
Google wird nun evtl noch mit anderen Mechanismen zur Komprimierung arbeiten, die evtl noch mehr rausholen, als deine, das ist auch denkbar.
Was du mal testen kannst ist, alle Bilder einmal durch tinypng zu jagen, das sollte schonmal massive Besserung bringen. Nicht vergessen, auch Thumbnails müssen komprimiert werden! Anderereseits kannst du auch mit der Shopware-eigenen Komprimierung arbeiten und schauen, welche Dateigrößen dabei rumkommen. Da solltest du einfach mal etwas experimentieren.
Bei mir ist es ähnlich. Betroffen sind nur die Bilder/Banner der Einkaufswelt. Diese habe ich in exakt der benötigten Pixelgröße erstellt und gestochen scharf hochgeladen. SW zeigt sie aber nicht so an, wie ich sie hochgeladen habe, sondern scheinbar in einer der Thumbnailgrößen, die die Datei unnötigerweise vergrößern und die Qualität verschlechtern. Dazu hab ich hier auch eine Frage gestartet, aber ich verstehe es dennoch nicht.
Ich habe die Einstellung noch wie in der Installation. Die Bilder für Artikel im Artikel (unter)ordner, die für die Einkaufswelten in Einkaufsweltenordner. Thumbnailgrößen sind alle wie voreingstellt - weil ich auch keinen Schimmer habe, was ich da ändern sollte.
Muss ich da bzgl. der Thumbnails irgendetwas ändern/bearbeiten?
Das ist ein anderes Problem, lies dir dazu am besten mal unseren Artikel zum Thema Einkaufswelten durch: Klick mich
Dadurch, dass das ja alles responsive sein muss, muss man hier mit bedacht arbeiten, einfach hochladen und “geht” ist hier nicht mehr… Und ja, es wird immer mit Thumbnails gearbeitet, damit wir auf mobilen Geräten nicht die volle Auflösung ausspielen müssen, wäre bei GPRS auch nicht schön.
vielen Dank. Auf dieser Seite war die Information beim Erstellen meiner Startseite noch nicht vorhanden. Seinerzeit gab es nur den ausführlichen Thread eines Nutzers, der die Feldgrößen und Abstände berechnet hat. Dort abgeleitet habe ich jeweils für 3- und 4-spaltige alle Feldgrößen vorher berechnet. Also die Größe stimmt exakt, es wird nichts abgeschnitten. Nur eben wirkt es ein wenig unscharf und google meckert wg. der Größe.
Ein anderer Nutzer hat mir nun den Tipp gegeben, die errechnete Größe zu verdoppeln. Das erscheint mir logisch, da dann die Thumbnails kleiner und nicht größer als meine Datei sind. Muss ich noch testen.
Wenn das Seitenverhältnis und die Speichergröße meiner Datei bereits optimal angepasst sind, macht es wenig Sinn eine Thumbnail zu erzeugen, die mehr Speicher benötigt, als mein Originalbild. Dort ist der Haken meiner Ansicht nach. Beim “Größerziehen” einer Datei, wird diese immer unscharf. Der Sinn der Thumbnails war meiner Kenntnis nach immer der, große Bilder kleiner zu machen und nicht umgekehrt.
Im Responsive Theme sind Bildgrößen, so lange sie größer als die Thumbnails sind, egal, viel mehr ist das Seitenverhältnis wichtig, denn das Theme geht hin und schaut, an welcher Seite vom Bild er für die gerade benötigte Bannergröße am sinnigsten was abschneiden kann und tut das dann.
Wenn dein Banner im Frontend zB ein Seitenverhältnis von 16:9 hat, dein Bild aber nur 16:8, kann es aber auch passieren, dass dein Bild auf (sagen wir jetzt einfach mal) 18:9 skaliert wird und damit unscharf wird. Daher das Element am einfachsten vorher in der Einkauswelt “ausmessen” und dann passend das Banner erstellen.
