Welche Bildgrößen sollte ich mit ThemeWare® nutzen?
Die Frage nach der perfekten Bildgröße lässt sich nicht pauschal beantworten. Es kommt immer darauf an, wofür ein Bild genutzt und wie groß es dargestellt wird.
In diesem Artikel geben wir dir ein paar nützliche Tipps an die Hand.
ThemeWare® PSD-Dateien nutzen
Grundsätzlich empfehlen wir dir, für Erlebniswelten und Logos die Vorlagen der mitgelieferten PSD-Dateien zu nutzen.
Hinweis: Über die ThemeWare® Utilities erhältst du alle Grafiken als PSD-Dateien und Zugang zu unserem kostenfreien Online-Kurs "Grafik-Gestaltung".
Tipp: Bei grundlegenden Änderungen bei der Thumbnail-Generierung von Shopware aktualisieren wir diese PSD-Dateien. Achte auf entsprechende Hinweise in unserem Service Portal.
Allgemein
Die Shopware 6 "Medienverwaltung" nutzt standardmäßig folgende Thumbnail-Größen:
400x400 Pixel (B x H)
800x800 Pixel (B x H)
1920x1920 Pixel (B x H)
Es genügt der Upload eines ausreichend großen Bildes. Shopware generiert automatisch die entsprechend Thumbnails in den oben genannten Größen. Die Thumbnails werden dann, je nach Viewport, in der Storefront verwendet. 1920 Pixel sind daher eine gute Ausgangsbasis.
Produktbilder
Um eine gute Performance sicher zu stellen solltest du hier nicht zu große Bilder verwenden. Shopware generiert aber zu jedem Bild passende Thumbnails für unterschiedliche Viewports (siehe oben) was der Performance sehr zu Gute kommt.
Shopware empfiehlt für eine optimale Darstellung quadratische Produktbilder mit einer Auflösung von 600x600 Pixeln. Generell sind aber auch andere Auflösungen möglich.
Tipp: Wir empfehlen alle Produktbilder mit den selben Proportionen und in einem einheitlichen Format (Quer-, Hochformat oder quadratisch) zu nutzen.
In unseren Demoshops nutzen wir aus visuellen Gründen 1200x1200 Pixel große Produktbilder.
Original (bzw. "Standard") oder "Feste Höhe" (bzw. "Beinhalten") [contain]
Produktbilder im Listing werden Standardmäßig gestreckt. Das bedeutet, dass die Produktbilder (roter Rahmen) auf die Höhe oder Breite (je nachdem ob das Bild im Hoch- oder Querformat vorliegt) des vorgesehenen Bereiches (blauer Rahmen) skaliert werden. Der vorgesehene Bereich wird dabei nicht zwangsläufig ausgefüllt. Die Proportionen der Produktbilder bleiben erhalten.
Zugeschnitten (bzw. Füllen) [cover]
Im Anzeigemodus "Zugeschnitten" werden Produktbilder (roter Rahmen) so skaliert, dass der vorgesehenen Bereich (blauer Rahmen) vollständig ausgefüllt wird. Hierbei wird die kleinste Seite auf die volle Breite oder Höhe (je nachdem ob das Bild im Hoch- oder Querformat vorliegt) des vorgesehenen Bereichs skaliert, der Rest vom Bild wird "abgeschnitten". Die Proportionen der Produktbilder bleiben erhalten.
Hinweis: Mehr Informationen zum Anzeigemodus von Bilder findest du im Artikel Anzeigemodus von Bildern.
Shop-Logo
Die optimale Bildgröße für dein Theme kannst du der PSD-Datei im Bildvorlagen-Downloadpaket der ThemeWare® Utilities entnehmen.
Mehr Informationen und nützliche Tipps zum Thema "Shop-Logo" findest du im Artikel:
Logo einbindenTipps zur Logo-GestaltungTheme-Vorschaubild
Das Theme-Vorschaubild für Theme-Duplikate wird mit 225x120px dargestellt. Diese Größe sollte das Bild mindestens haben. Das Standard-Theme von Shopware nutzt ein Bild in der Größe 228x138px.
Größere Bilder werden mittig zentriert ausgerichtet und skaliert. Durch die CSS-Eigenschaft "cover" behält das Bild sein Seitenverhältnis bei und wird so skaliert, dass es so klein wie möglich dargestellt wird, aber den verfügbaren Bereich von 225x120px vollständig abdeckt.
Wir empfehlen dir die Proportion von 225x120 Pixeln zu nutzen. Durch die automatische Skalierung ist aber auch ein größeres Bild möglich (z.B. 250x133px, 300x160px, 380x202px oder 450x240px).
Last updated
