Optimierung von Bildern für Mobiltelefone

Mobilnutzer sollten kein 1200px-Bild herunterladen müssen, wenn ihr Smartphone nur 400px anzeigt. Mit responsiven Bildern überlassen Sie es dem Browser, die richtige Größe auszuwählen, sodass die Seite schneller geladen wird und der Kunde ein besseres Erlebnis hat. Dies ist besonders wichtig bei Produktlisten und Startseiten, auf denen viele Bilder gleichzeitig angezeigt werden.

So skaliert Shoporama Ihre Bilder

Shoporama optimiert Ihre Produktbilder automatisch, wenn sie im Webshop angezeigt werden:

• Skalierung. Bilder werden genau auf die von Ihrem Theme geforderte Größe verkleinert, damit der Browser keine riesigen Dateien verarbeiten muss.
• WebP-Konvertierung. Moderne Browser erhalten automatisch das WebP-Format, das deutlich kleiner ist als JPG.
• Qualitätsanpassung. Sie können die Komprimierung steuern und so selbst das Gleichgewicht zwischen Dateigröße und Schärfe wählen.
• Caching. Skalierte Bilder werden zwischengespeichert, sodass die Skalierung nur beim ersten Aufruf einer bestimmten Größe erfolgt.

So skalieren Sie ein Bild in Ihrem Theme

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

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

Parameter von getSrc()

Die Methode akzeptiert fünf Parameter, von denen die letzten drei optional sind:

Responsive Bilder mit srcset

Wenn du verschiedene Größen für Mobilgeräte, Tablets und Desktops bereitstellen möchtest, kombinierst du getSrc() mit dem HTML-Attribut srcset. Der Browser wählt dann automatisch die Größe aus, die zur Bildschirmauflösung passt:

<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 bei Bildern, die sich weiter unten auf der Seite befinden, „loading="lazy"“ hinzu, damit sie erst geladen werden, wenn der Kunde dorthin scrollt.

Beispiel: Zuschneiden eines Produktbildes mit festem Seitenverhältnis

Wenn Sie alle Bilder im gleichen quadratischen Format haben möchten, z. B. in einer Produktliste, verwenden Sie den Skalierungstyp „box“:

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

Beispiel: WebP erzwingen und Qualität verringern

Bei Miniaturansichten kannst du die Dateigröße erheblich reduzieren, indem du WebP erzwingst und die Qualität etwas verringerst:

<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 du eines der Standard-Themes von Shoporama wie „Delaware“ verwendest, sind responsive Bilder bereits für dich eingerichtet. Du musst dir darüber nur Gedanken machen, wenn du das Theme selbst anpasst oder ein neues erstellst.

Wie groß ist der Unterschied für das Kundenerlebnis?

Groß. Ein vollständiges Produktbild mit einer Größe von 1200x1200 kann mehrere hundert Kilobyte groß sein, während eine mobile Version mit 400x400 in der Regel weniger als 50 KB groß ist. Auf einem Handy mit schlechter Verbindung kann das den Unterschied zwischen einer schnellen Seite und einem Kunden ausmachen, der den Shop verlässt.

Was ist der Unterschied zwischen „fit“ und „box“?

„Fit“ behält das ursprüngliche Seitenverhältnis des Bildes bei und passt es in den angegebenen Rahmen ein. „Box“ füllt den gesamten Rahmen aus und schneidet den Teil ab, der nicht hineinpasst. Verwenden Sie „Box“ für einheitliche Produktlisten und „Fit“ für Detailseiten, auf denen das gesamte Bild angezeigt werden soll.

Werden Bilder bei jedem Aufruf der Seite neu skaliert?

Nein. Shoporama speichert das skalierte Bild beim ersten Abruf, sodass es bei allen nachfolgenden Besuchen schnell geladen wird. Du musst dir keine Gedanken über das Caching machen.

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

Ja, wenn du zu große Bilder für Mobilgeräte bereitstellst. Wenn du „srcset“ und „sizes“ richtig einsetzt, beseitigst du in der Regel die Warnungen unter „Properly size images“ in PageSpeed Insights.

Beeinflusst das mein Ranking bei Google?

Die Seitengeschwindigkeit auf Mobilgeräten fließt in die Bewertung von Google ein. Ein schnelleres Laden von Bildern kann die Core Web Vitals (insbesondere LCP) verbessern, was sich positiv auf die SEO auswirkt. Das ist zwar keine Zauberei, hilft aber.

Kann ich das Gleiche für Bilder in Blogbeiträgen oder auf Landingpages anwenden?

Ja. Alle Bildobjekte in Shoporama verfügen über getSrc(). Das funktioniert gleichermaßen für Produkte, Kategorien, Landingpages, Blogbeiträge und Markenlogos.

Benötigst du Hilfe bei der Anpassung deines Themes, damit die Bilder auf Mobilgeräten optimal geladen werden? Schreibe an support@shoporama.dk.