Bildgrößen

Unter Bildgröße ist die Auflösung des Bildes in Pixeln zu verstehen.

Welche Auflösung sollten die Produktbilder haben?

Thumbnails

Grundsätzlich errechnet die Medienverwaltung von Shopware Thumbnail-Größen (1) der hochgeladenen Produktbilder. Dadurch liegt das Ursprungsbild in verschiedenen Auflösungen vor und der Shop kann für jede Bildschirmauflösung und jedes Endgerät eine optimierte Variante des Bildes bereitstellen.

Auch die Qualität (2) dieser errechnete Thumbnail-Bilder wird in diesem Schritt optimiert, um die Ladezeiten des Shop zu verbessern.

Thumbnail-Größen (maximale Kantenlänge)
400x400 Pixel
800x800 Pixel
1920x1920 Pixel

Mindest-Auflösung

Damit Shopware diese Thumbnail-Größen berechnen kann, solltest Du also Produktbilder mit einer Mindestauflösung von 1920 Pixeln an der längsten Kantenlänge bereitstellen - denn Vergrößern kann Shopware Deine Bilder nicht.

Die verschiedenen Bildgrößen (Thumbnails) werden dann in einem srcset im Code der Seite ausgegeben. srcset ist ein HTML-Attribut, das in Verbindung mit dem img-Tag verwendet wird, um dem Browser mehrere Bildquellen zur Verfügung zu stellen. Diese Quellen haben unterschiedliche Auflösungen oder Größen, um eine optimale Anzeige auf verschiedenen Geräten zu gewährleisten.

Bei der Verwendung von srcset im HTML-Tag für Bilder berücksichtigt der Browser allerdings nur die Breite des Bildes.

Für eine optimale Darstellung sollten Bilder daher eine Mindestbreite von 1920 Pixel haben.

Ist die Auflösung der Produktbilder zu klein für die Anzeigefläche, sodass diese nicht füllend dargestellt werden, kannst Du den Modus Beinhalten wählen. Die Bilder werden so über ihre eigentliche Größe hinaus gestreckt und füllend angezeigt.

Die Einstellungen für den Anzeigemodus findest Du in vielen Element der Erlebniswelt, jedoch nicht im Listing-Element.

Zoom & Vollbild-Galerie

Das Theme bietet die Möglichkeit die Bilder auf der Produkt-Detailseite per MouseOver zu zoomen und per Klick auf das Bild eine Vollbild-Galerie zu öffnen. Dazu verwendet Shopware unter Anderem das ursprünglich hochgeladene Originalbild.

Um diese Funktionen sinnvoll nutzen zu können, solltest Du Produktbilder mit einer höheren Auflösung als der oben genannten Mindestauflösung bereitstellen. Gängige Monitore haben heutzutage mindestens eine HD-Auflösung (1920x1080).

Je nachdem wie detailliert ein Kunde sich die Produkte anhand hochauflösender Bilder anschauen können soll, kannst Du auch deutlich größere Originalbilder Deiner Produkte in Shopware hochladen.

Achte hierbei auf die Dateigröße der Bilder. Das Originalbild in der Zoom-Funktion wird im Gegensatz zu den Thumbnails von Shopware nicht zusätzlich komprimiert.

Es wird allerdings auch erst geladen, wenn die Zoom-Funktion bei MouseOver aktiviert oder die Vollbild-Galerie bei Klick auf das Produktbild erscheint.

Mobile Endgeräte

Wer glaubt, dass auf mobilen Geräten wie Tablets und Smartphones kleinere Produktbilder angezeigt werden als auf einem Desktop Monitor, täuscht sich. Gerade die mobilen Endgeräte haben hochauflösende Displays mit einer bis zu 3-Fachen Pixeldichte (Device Pixel Ratio) gegenüber einem gängigen Monitor (Nicht Retina).

Vereinfacht bedeutet das, dass ein Bild auf einer verfügbaren Fläche von 333x423 Pixeln mindestens 999x846 Pixel groß sein muss. Das srcset des img-Elements hält alle Thumbnails des Shops sowie das Originalbild bereit. Der Browser wählt nun das Thumbnail mit der 1920x1920 Pixeln aus, um den verfügbaren Bereich auszufüllen.

Problem zu kleiner Produktbilder

Damit Shopware die Thumbnail-Größen korrekt berechnen kann, solltest Du Produktbilder mit einer Mindestauflösung von 1920 Pixeln in der Breite bereitstellen. Liegen die Bilder in einer kleineren Auflösung vor, skalieren die Bilder in der Storefront Deines Shops nicht korrekt. Das ist genau genommen kein direktes Problem von Shopware, sondern der Architektur von .

Beachte, dass sich dieses Problem überwiegend in der mobilen Darstellung bemerkbar macht und Bilder nicht immer den zur Verfügung stehenden Platz ausfüllen.

Aber was passiert nun, wenn die Produktbilder nicht die ausreichende Auflösung von 1920px in der Breite besitzen? Dann bekommen wir gelegentlich Nachrichten und Screenshots, welche uns eine Detailseite zeigen, in denen das Bild den verfügbaren Bereich nicht vollständig ausfüllen kann. Warum das so ist, erklären wir im folgenden.

Beispiel:

In dem folgenden Live-Code Beispiel befinden sich untereinander zwei vollkommen identische srcsets, wie sie Shopware auf der Detailseite zur Darstellung des Galerie-Sliders verwendet.

Shopware errechnet im Standard die folgende Thumbnail-Größen, welche dann in einem srcset ausgespielt werden:

Thumbnail-Größen (maximale Kantenlänge)
400x400 Pixel
800x800 Pixel
1920x1920 Pixel

In srcset-A haben wir als Originalbild eine Auflösung von 788x1000px - also eigentlich zu klein für Shopware.

srcset-A

<img src="https://src.zenit.design/codepen/wrong.jpg" 
    srcset="https://src.zenit.design/codepen/wrong_800x800.jpg 800w,
    https://src.zenit.design/codepen/wrong_400x400.jpg 400w,
    https://src.zenit.design/codepen/wrong_1920x1920.jpg 1920w">

In srcset-B haben wir als Originalbild eine Auflösung von 1920x2694px - also groß genug für Shopware.

srcset-B

<img src="https://src.zenit.design/codepen/correct.jpg"
    srcset="https://src.zenit.design/codepen/correct_800x800.jpg 800w,
    https://src.zenit.design/codepen/correct_400x400.jpg 400w,
    https://src.zenit.design/codepen/correct_1920x1920.jpg 1920w">

Bei der Berechnung der Thumbnails aus srcset-A wird in das Thumbnail 1920x1920 das Bild mit der Originalgröße von nur 788x1000px abgelegt. Es liegt also ein kleineres Bild vor, als dem Browser im srcset mit der Angabe des 'w'-Attributs von 1920w (Zeile 4) mitgeteilt wird.

Ein srcset ist dafür zuständig das passende Bild auszuliefern und zu "rendern". Dafür werden mit Hilfe der Angaben eine Pixeldichte berechnet und diese auf das ausgewählte Thumbnail angewendet.

Auch wenn das Problem, wie eingangs erwähnt, hauptsächlich bei mobilen Geräten auftritt, betrachten wir hier ein Desktop-Gerät mit einer einfachen . Damit das Problem auf Desktop-Geräte sichtbar wird, müssen wir eine Viewport-Breite betrachten, welche das 1920x1920 Thumbnail ausspielen würde.

Im Beispiel unseres Live-Code Beispiels wird es in dieser Doku-Plattform mit einer Viewportbreite von 1054px angezeigt. Der Browser wird also nicht das 800x800 Thumbnail wählen, da dieses zu klein für die Anzeigefläche des Viewports ist. Es wird also das 1920x1920 Thumbnail ausgewählt - für unser Beispiel also genau richtig:

Angezeigte Bildgröße berechnen:

Zur Berechnung der angezeigten Bildgröße (oder auch rendered size) wird im ersten Schritt die Pixeldichte ermittelt, um darauf die gerenderte Größe des Bildes zu bestimmen: Formel Pixeldichte: Viewportbreite / 'w'-Attribut = Pixeldichte Formel Rendered size: Pixeldichte * native Auflösung = Rendered size

	srcset-A	srcset-B
Pixeldichte	1054px/1920w = 0,5489583	1054px/1920w = 0,5489583
Rendered size	0,5489583 * 788px = 432,6px	0,5489583 * 1920px = 1054px
Ergebnis	Das Bild wird bei einer Viewportbreite von 1054px ca. 433px breit dargestellt.	Das Bild wird bei einer Viewportbreite von 1054px ca. 1054px breit dargestellt.

Wie im eingebetten Live-Code Beispiel zu erkennen, weiß der Browser nicht, dass in dem 1920x1920 Thumbnail ein zu kleines Bild steckt. Das Bild wird mit der Pixeldichte als Faktor skaliert und somit zu klein dargestellt.

Bitte beachte daher, dass 'w'-Attribute verwendet werden, um die Pixeldichte der Bilder festzulegen. Die Breiten der Thumbnails sollten daher mit den Angaben der Weite im srcset übereinstimmen.

Weiterführende Informationen: https://issues.shopware.com/issues/NEXT-14066https://stackoverflow.com/questions/33933793/why-does-srcset-resize-image