Seitenverhältnisse & Bildformate in Shopware - wie viel Standard ist sinnvoll?

In einem laufenden Projekt kam die berechtigte Frage auf: Muss wirklich jede Grafik in sieben verschiedenen Formaten vorliegen? Die Antwort: Nein, aber es hilft, ein klares Raster zu haben.

Unsere Empfehlung lautete: Statt Pixel-Angaben festzulegen, lieber mit Seitenverhältnissen arbeiten. Das sorgt für mehr Flexibilität und eine saubere visuelle Linie, egal ob Desktop oder Mobile.

Die Designerin wollte wissen, ob das dann auch für breite Banner, quadratische oder hochkantige Bilder gilt. Ja, denn das Seitenverhältnis sagt nichts über die Größe, sondern nur über die Form. Und genau die entscheidet, ob ein Bild universal funktioniert oder nicht.

Die Faustregel:

• Sehr breit (z. B. 13×1): sieht nur auf Desktop richtig gut aus, auf Mobile wird daraus sonst nur ein schmaler Streifen. Deshalb: eine eigene Mobile-Variante anlegen. → Empfohlene Breite: 2716 px

• Quadratisch (1×1) oder hochkant (z. B. 4×5): funktioniert vor allem mobil, und lässt sich auf Desktop wunderbar mehrspaltig nebeneinander darstellen. Diese Bilder werden auf Desktop nie bildschirmfüllend angezeigt. Deshalb reicht hier die halbe Containerbreite. → Empfohlene Breite: 1358 px

Zur Orientierung: Unser Container im Theme ist 1358 px breit, wir arbeiten bei vollbreiten Elementen mit der doppelten Auflösung (2716 px), um Retina-Displays gerecht zu werden.

Beispiele:

• 13×1 → 2716 × 209 px (Störer)

• 16×9 → 2716 × 1527 px (Hero)

• 3×2 → 1358 × 905 px (Teaser)

• 1×1 → 1358 × 1358 px (Square)

• 4×5 → 1358 × 1697 px (Portrait)

Ein Thema haben wir dabei erstmal bewusst ausgeklammert: Wie groß sollen eigentlich die Buttons auf den Bildern sein? → Am besten gar nicht einbauen, sondern als separate HTML-Elemente platzieren, so bleiben sie responsive, editierbar und barrierefrei.

Natürlich könnte man auch einfach alle Bilder pauschal mit 2716 Pixeln Breite anlegen. Das würde zwar etwas mehr Speicherplatz verbrauchen, bringt aber den Vorteil einer einheitlichen Arbeitsweise, insbesondere im Team oder bei wechselnden Designanforderungen.

Die tatsächlichen Darstellungsgrößen werden ohnehin über die Alben und deren Thumbnails gesteuert. Dort lassen sich passende Größen pro Anzeigeort definieren, sodass die Ausgabe im Frontend immer optimiert bleibt, unabhängig von der Originalgröße der Uploads.

Fazit: Wer mit festen Seitenverhältnissen arbeitet und die Auflösung am Einsatzzweck orientiert, spart sich unnötigen Aufwand - ohne an Qualität zu verlieren. Ob man alle Bilder mit maximaler Breite erstellt oder differenziert vorgeht, hängt vom Workflow ab: Einheitlichkeit erleichtert die Produktion, differenzierte Größen sparen Speicherplatz. Am Ende sorgt die Thumbnail-Logik in Shopware ohnehin dafür, dass im Frontend nur die passende Variante angezeigt wird - und die Ladezeit optimal bleibt.