Hallo, Da Google ja ab demnächst ausschlicht mit Mobilen crawlern unterwegs ist beschäftigt mich eine Frage, Google (pagespeed) sagt mir jetzt schon das einige meiner Bilder zu groß sind für Mobile Ansichten. Ich habe max. 1200px Bilder im Shop, wenn ich mir aber nun ein Iphone 12 Display anschaue das dass 2340 x 1080 Pixel bei 476 ppi hat, da würden ja RIESEN Bilder draufpassen. Sehe ich das Falsch oder kann ich meine Bilder weiter Optimieren ? Lg Thomas
Da ist tatsächlich noch Optimierungspotential. Vielleicht kurz zur Erklärung, wie es bei Bildern läuft. Die Umrechnung zu sagen "Mein iPhone hat 2300 Pixel breite, da kann ich ein 2300 Pixel Bild draufhauen" ist falsch. Wird der Display kleiner, wird die Bildgröße reduziert. Das passiert automatisch im Browser durch Image Resizing. Das Bild wird dann im gleichen Verhältnis in der Bildgröße reduziert, sodass es bei der Auflösung des Bildes noch draufpasst. Hört sich erstmal verwirrend an (und ist auch stark verkürzt dargestellt), ist aber in etwa so zu verstehen: Ein Bild das auf einem 24'' Bildschirm Desktop 1900 Pixel breit und 500 Pixel bei 72 dpi hoch ist. Wird auf einem Smartphone Display (je nach Modell) hochkant noch 380 Pixel breit sein. Muss der mobile Browser jetzt trotzdem das 1900 Pixel Bild laden, wird es per Code auf 380 Pixel reduziert. Geladen wird trotzdem das große Bild. Das 1900 px Bild ist z.B. 400 KB groß, das gleiche Bild direkt auf 380 px reduziert wäre nur 60 KB groß. Man lädt also mobile in dem Moment 340 px sinnlos. Bei euch laden aktuell 4,15 MB in der mobilen Version. Das ist zu groß. Beim Slider macht es Gambio euch einfach. Da kann man für jede Displaygröße (Desktop, Tablet breit, Tablet schmal, Smartphone) ein eigenes Bild hochladen. Davon sollte man Gebrauch machen. Im Idealfall 4 verschiedene Dateien. Wobei in der Praxis meist 2 reichen. Tablet ist bei den meisten Shops nur eine geringe Userzahl. Da tut es meist der Desktopbanner. Da auch direkt bei Besuch alle (!) Slider ausgeliefert werden, sollte man deren Anzahl reduzieren. Ein Slider ist eine heiße Fläche, die normal dafür da ist dem Kunden zu sagen wo er ist oder direkt bestimmte Produkte oder Angebote anzupreisen. Niemand schaut sich mehr als 2-3 Slider an. Alles über 3 Slidern kann also prinzipiell weg. Wieder was gespart. Komplizierter wird es bei den Bildern im Text. Mit dem neuen Styleedit kann man bei Themes einstellen, auf welchen Displaygrößen eine Sektion angezeigt werden soll. Damit kann man das händeln. Wer noch eine alte Gambio Version hat, muss hier per CSS ran. Auch sehr brauchbar ist das Modul zur Ladezeitoptimierung: https://www.werbe-markt.de/gambio-module-download.php#Modul_zur_Ladezeitoptimierung
Bilder im Textbereich habe ich folgendermaßen gelöst. Nachdem das Bild eingefügt wurde, doppelklick auf das Bild. Bei Breite und Höhe habe ich die Pixelzahl rausgenommen und das ganze in Prozent eingetragen. Breite 100% und die Höhe habe ich leer gelassen. So wird bei mir z.B. ein 2000px breites Bild auf jedem Mobiltelefon korrekt dargestellt. Hier ein Beispiel wie das dann ausschaut. https://yasumi-cosmetics.de/info/hautprobleme/schuppenflechte.html
Ja Handkannte das ist ja gängige Praxis, aber solch große Bilder verringern ja die Ladegeschwindigkeit. Das möchte ich eben umgehen.
Du kannst dem Bild auch einfach die img-responsive Klasse hinzufügen. Hat den gleichen Effekt. Wie Thomas_F aber korrekt schrieb, passiert dann das gleiche wie oben beschrieben: Geladen wird das große Bild und dann nur in der Darstellung verkleinert. Das sind Datenmengen, die nicht sein müssten.