Bilder richtig dimensionieren

[Willi82]

Hallo zusammen,

wenn ich meine Seite https://myclipies.com auf PageSpeed Insights analysieren lasse, bekomme ich die Rückmeldung, dass ich "Bilder richtig dimensionieren" soll.

Das ist grundsätzlich kein Problem, nur kann ich aus dem Feedback nicht erkennen, was ich genau ändern soll.
Ich erhalte folgende Hinweismeldung:

<img src="https://cdn.shopify.com/s/files/1/0623/6087/9360/files/MyClipies-TrustBadg…" alt="MyClipies Umweltschutz wiederverwendbare Silikonbehälter" srcset="//cdn.shopify.com/s/files/1/0623/6087/9360/files/MyClipies-TrustBadge-Umwe…" width="1420" height="1420" loading="lazy" sizes="(min-width: 990px) 550px, (min-width: 750px) 550px, …" class="multicolumn-card__image">

Das Bild hat jetzt folgende Abmessungen:

Welche Abmessungen sollte das Bild konkret haben, damit Pagespeed.web.dev die Hinweismeldung nicht mehr auswirft?
Vielen Dank für die Info

[Gabe · Accepted solution]

Hey @Willi82 

Danke für die Angaben und deine URL. Ich habe unten zwei Dinge für dich: 1) eine Empfehlung zu deinem Bild Beispiel, und 2) einen Video wo ich einen Health Check deines Shops ausführe und Tipps abgebe, die dir helfen können dein Traffic und die Conversions zu erhöhen! Wie läuft im großen und ganzen das Shop, oder ist noch nicht live?

Empfehlung zu deinem Bild Beispiel

Die Rendered Size des Bildes in deinem Beispiel oben beträgt 122px x 122px, während die Intrinsic Size 540px x 540px beträgt. Das bedeutet, dass das Bild im Shop kleiner angezeigt wird, als es tatsächlich ist. Dies führt zu unnötigem Datenverbrauch und längeren Ladezeiten, da das Bild erst herunterskaliert werden muss. Um die Ladezeiten zu verbessern und den mobilen Datenverbrauch zu reduzieren, sollte man das Bild so optimieren, dass die tatsächliche Größe (Intrinsic Size) der auf der Webseite angezeigten Größe (Rendered Size) entspricht. In deinem Fall bedeutet dies, dass das Bild auf 122px x 122px reduziert werden sollte.

Hier sind die Schritte, die du ausführen kannst, um das Bild richtig zu dimensionieren:

• Öffne das Bild in einem Bildbearbeitungsprogramm wie Adobe Photoshop, GIMP oder einem Online-Tool wie Pixlr (https://pixlr.com/).
• Ändere die Größe des Bildes auf 122px x 122px. Stelle sicher, dass die Proportionen beibehalten werden, um Verzerrungen zu vermeiden.
• Speicher das Bild in einem optimierten Format wie JPEG oder WebP, um die Dateigröße weiter zu reduzieren.
• Ersetze das alte Bild durch das neu dimensionierte und optimierte Bild.
• Führe den PageSpeed Insights Test erneut durch, um sicherzustellen, dass die "Bilder richtig dimensionieren" Meldung nicht mehr angezeigt wird.

Durch die Anpassung der Bildgröße an die tatsächlich benötigte Größe auf der Webseite wird die Ladezeit verbessert und der mobile Datenverbrauch reduziert.

Dann siehe auch meinen Video hier zu deinem Shop.

Lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

[juliusb1]

Hallo Willi, ich habe ein ähnliches Problem mit meinen Kategoriebildern...

Wo genau hast du dir die Instrinct size anzeigen lassen?

LG