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.

Tipp: Wir empfehlen für jede Art von Bildern möglichst gleich Große Bilder oder zumindest Bilder mit den selben Proportionen zu nutzen.

Tipp: ThemeWare® PSD-Dateien nutzen

Grundsätzlich empfehlen wir dir, für Erlebniswelten und Logos die Vorlagen der mitgelieferten PSD-Dateien zu nutzen.

Tipp: Über die ThemeWare® Utilities erhältst du alle Grafiken als PSD-Dateien und Zugang zu unserem kostenfreien Online-Kurs "Grafik-Gestaltung".


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. 1920px oder größer sind daher eine gute Ausgangsbasis.

Die Shopware 6 "Medienverwaltung" nutzt für Hersteller-Logos standardmäßig folgende Thumbnail-Größen:

  • 200x200 Pixel (B x H)

  • 360x360 Pixel (B x H)

  • 1920x1920 Pixel (B x H)

Das bedeutet du solltest diese Logos in einer Größe von 1920x1920px oder größer hochladen, damit in jedem Browser und jedem Viewport ausreichend große Thumbnails geladen werden.

Kategoriebilder

Die Shopware 6 "Medienverwaltung" nutzt für Kategoriebilder standardmäßig folgende Thumbnail-Größen:

  • 400x400 Pixel (B x H)

  • 800x800 Pixel (B x H)

  • 1920x1920 Pixel (B x H)

Das bedeutet du solltest diese Bilder in einer Größe von 1920x1920px oder größer hochladen, damit in jedem Browser und jedem Viewport ausreichend große Thumbnails geladen werden.

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.

Die Shopware 6 "Medienverwaltung" nutzt für Produktbilder standardmäßig folgende Thumbnail-Größen:

  • 280x280 Pixel (B x H)

  • 400x400 Pixel (B x H)

  • 800x800 Pixel (B x H)

  • 1920x1920 Pixel (B x H)

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 1200x1200px große Produktbilder.

Wir empfehlen aber aufgrund der Thumbnail-Voreinstellungen Bilder mit 1920x1920px oder größer hochzuladen.

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.

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

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

Versandarten-Logos

Nutze gerne unsere Pagespeed optimierte Logos für Versandanbieter. Über 40 Logos im ressourcenschonenden SVG-Format erhältst du im Downloadpaket der ThemeWare® Utilities.

Zahlungsarten-Logos

Nutze gerne unsere Pagespeed optimierte Logos für Zahlungsanbieter. Über 90 Logos im ressourcenschonenden SVG-Format erhältst du im Downloadpaket der ThemeWare® Utilities.

Last updated

Was this helpful?