Optimierung von Bildern für Mobiltelefone

Mobile Nutzer sollten kein 1200 Pixel großes Bild herunterladen, wenn ihr Handy nur 400 Pixel anzeigt. Mit responsiven Bildern lassen Sie den Browser die richtige Größe wählen, so dass die Seite schneller geladen wird und der Kunde ein besseres Erlebnis hat. Dies ist besonders wichtig bei Produktlisten und Titelseiten, wo es viele Bilder auf einmal gibt.

Wie Shoporama Ihre Bilder skaliert

Shoporama optimiert Ihre Produktbilder automatisch, wenn sie im Online-Shop erscheinen:

• Skalierung. Die Bilder werden auf die exakte Größe skaliert, die Ihr Thema verlangt, so dass der Browser nicht mit riesigen Dateien arbeiten muss.
• WebP-Konvertierung. Moderne Browser liefern automatisch das WebP-Format, das wesentlich kleiner ist als JPG.
• Qualitätsanpassung. Sie können die Komprimierung steuern, um ein ausgewogenes Verhältnis zwischen Dateigröße und Schärfe zu finden.
• Zwischenspeicherung. Skalierte Bilder werden so gespeichert, dass sie nur bei der ersten Anforderung einer bestimmten Größe skaliert werden.

So skalieren Sie ein Bild in Ihrem Thema

In Ihrem Smarty-Theme verwenden Sie die Methode getSrc() für ein Bild. Sie ist bei allen Bildobjekten vorhanden, z.B. $product->getImage(), $category->getImage() und ähnliche. Sie gibt die URL des skalierten Bildes zurück:

<img src="<{$product->getImage()->getSrc(400, 400)}>" alt="<{$product->getName()}>">

Parameter bei getSrc()

Die Methode benötigt fünf Parameter, von denen die letzten drei optional sind:

Reaktionsfähige Bilder mit srcset

Um unterschiedliche Größen für Mobilgeräte, Tablets und Desktops bereitzustellen, kombinieren Sie getSrc() mit dem HTML-Attribut srcset. Der Browser wählt dann automatisch die Größe, die der Bildschirmauflösung entspricht:

<img src="<{$product->getImage()->getSrc(400, 400)}>" srcset="<{$product->getImage()->getSrc(400, 400)}> 400w, <{$$product->getImage()->getSrc(800, 800)}> 800w, <{$product->getImage()->getSrc(1200, 1200)}> 1200w" sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1200px" alt="<{$product->getName()}>" loading="lazy" >

Tipp! Fügen Sie loading="lazy" bei Bildern hinzu, die sich weiter unten auf der Seite befinden, damit sie nur geladen werden, wenn der Kunde dorthin scrollt.

Beispiel: Abgeschnittenes Produktbild mit festem Verhältnis

Wenn Sie alle Bilder im gleichen quadratischen Format haben möchten, z. B. auf einer Produktliste, verwenden Sie den Skalierungstyp Box:

<img src="<{$product->getImage()->getSrc(600, 600, 'box')}>" alt="<{$product->getName()}>">

Beispiel: WebP und niedrigere Qualität erzwingen

Bei Thumbnails können Sie viel Dateigröße einsparen, indem Sie WebP erzwingen und die Qualität leicht herabsetzen:

<img src="<{$product->getImage()->getSrc(200, 200, 'box', 'webp', 75)}>" alt="">

Häufig gestellte Fragen

Muss ich selbst etwas tun oder geschieht das automatisch?

Wenn Sie eines der Standard-Themen von Shoporama wie Delaware verwenden, sind responsive Bilder bereits für Sie eingerichtet. Sie müssen sich nur darum kümmern, wenn Sie das Theme selbst anpassen oder ein neues Theme erstellen.

Wie groß ist der Unterschied zum Kundenerlebnis?

Riesig. Ein vollständiges 1200x1200-Produktbild kann Hunderte von Kilobytes beanspruchen, während eine 400x400-Mobilversion in der Regel weniger als 50kb groß ist. Auf einem Mobiltelefon mit einer schlechten Verbindung kann dies den Unterschied zwischen einer schnellen Seite und dem Verlassen des Ladens ausmachen.

Was ist der Unterschied zwischen fit und box?

fit bewahrt die ursprünglichen Proportionen des Bildes und passt es in den angegebenen Rahmen ein. box füllt den gesamten Rahmen aus und schneidet ab, was nicht hineinpasst. Verwenden Sie box für einheitliche Produktlisten und fit für Detailseiten, auf denen das gesamte Bild angezeigt werden muss.

Werden Bilder bei jeder Anzeige der Seite skaliert?

Nein, das ist nicht der Fall. Shoporama speichert das skalierte Bild bei der ersten Anfrage, so dass es bei allen folgenden Besuchen schnell ist. Sie müssen sich nicht um das Caching kümmern.

Werde ich bei Google PageSpeed für große Bilder bestraft?

Ja, wenn Sie Bilder liefern, die für mobile Geräte zu groß sind. Wenn Sie srcset und Größen korrekt verwenden, werden die Warnungen "Bilder in der richtigen Größe" in PageSpeed Insights normalerweise entfernt.

Hat dies Auswirkungen auf mein Google-Ranking?

Die Seitengeschwindigkeit auf Mobilgeräten wird von Google mitbewertet. Schnelleres Laden von Bildern kann die Core Web Vitals (insbesondere LCP) verbessern, was sich positiv auf die Suchmaschinenoptimierung auswirkt. Es ist keine Zauberei, aber es hilft.

Kann ich das Gleiche für Blog- oder Landing-Page-Bilder anwenden?

Ja, das können Sie. Alle Bildobjekte in Shoporama verfügen über getSrc(). Das gilt für Produkte, Kategorien, Landing Pages, Blogbeiträge und Markenlogos.

Benötigen Sie Hilfe bei der Anpassung Ihres Themes, damit die Bilder auf dem Handy optimal geladen werden? Schreiben Sie an support@shoporama.dk.