# Bildgrößen

## 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.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-2a0f5d7c1f88092bd18f7da9dfa380c11d84e34d%2Fdocs-de-faq-image-resolution-media-folder-thumbnails%20\(1\).png?alt=media)

| 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. 

{% hint style="success" %}
Für eine optimale Darstellung sollten Bilder daher eine Mindestbreite von **1920 Pixel** haben.
{% endhint %}

Ist die Auflösung der Produktbilder zu klein für die Anzeigefläche, sodass diese nicht füllend dargestellt werden, kannst Du den Modus `Strecken/Skaliert` 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 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.

{% hint style="warning" %}
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.
{% endhint %}

### 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).

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-dce14611849c0d850ffa0a6a286ac399ec0533c1%2Fdocs-de-faq-image-resolution-mobilde-dpr%20\(1\).png?alt=media)

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  [**srcsets**](#user-content-fn-1)[^1].

{% hint style="warning" %}
Beachte, dass sich dieses Problem überwiegend in der mobilen Darstellung bemerkbar macht und Bilder nicht immer den zur Verfügung stehenden Platz ausfüllen.
{% endhint %}

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:

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FKQXOFKkNjF3QHeJ7Lxho%2Fdocs-en-content-image-size-example-mobile.png?alt=media&#x26;token=3a476799-beb1-467a-ae26-122638256f5a" alt="" width="188"><figcaption></figcaption></figure>

\
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.

{% embed url="<https://codepen.io/zenitdesign/pen/WNmXpwR>" fullWidth="true" %}

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

| 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.&#x20;

{% code title="srcset-A" lineNumbers="true" %}

```html
<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">
```

{% endcode %}

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

{% code title="srcset-B" lineNumbers="true" %}

```html
<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">
```

{% endcode %}

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.&#x20;

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 DPR[^2]. Damit das Problem auf Desktop-Geräte sichtbar wird, müssen wir eine Viewport-Breite betrachten, welche das 1920x1920 Thumbnail ausspielen würde.&#x20;

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&#x20;

<table><thead><tr><th width="129"></th><th>srcset-A</th><th>srcset-B</th></tr></thead><tbody><tr><td>Pixeldichte</td><td><code>1054px/1920w = 0,5489583</code></td><td><code>1054px/1920w = 0,5489583</code></td></tr><tr><td>Rendered <br>size</td><td><code>0,5489583 * 788px = 432,6px</code></td><td><code>0,5489583 * 1920px = 1054px</code></td></tr><tr><td><strong>Ergebnis</strong></td><td>Das Bild wird bei einer Viewportbreite von 1054px ca. 433px breit dargestellt.</td><td>Das Bild wird bei einer Viewportbreite von 1054px ca. 1054px breit dargestellt.</td></tr></tbody></table>

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.**&#x20;

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.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FxE2o7Vg1hDfUXn6kp15q%2Fdocs-en-content-image-size-srcset-example.png?alt=media&#x26;token=94df884a-ffd8-42d5-a06f-01f3a64f7d16" alt=""><figcaption></figcaption></figure>

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

[^1]: Dieses Attribut gibt dem Browser ein Set an Bildern, die geladen werden können.

[^2]: Device Pixel Ratio