Bildgrößen
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.
Die ideale Bildgröße hängt von deinem Design und dem gewünschten Detailgrad ab.
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".
Hinweis: Bei grundlegenden Änderungen bei der Thumbnail-Generierung von Shopware aktualisieren wir die ThemeWare® 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. 1920px oder größer sind daher eine gute Ausgangsbasis.
Hersteller-Logo
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 sicherzustellen, solltest du natürlich keine unnötig großen Bilder verwenden. Gleichzeitig ist es wichtig, deine Produktbilder ausreichend zu optimieren, um eine hohe Bildqualität bei möglichst geringer Dateigröße zu gewährleisten. Ein Vorteil von Shopware ist, dass für jedes hochgeladene Bild automatisch passende Thumbnails für unterschiedliche Viewports generiert werden (siehe oben). Dadurch wird sichergestellt, dass je nach Endgerät und Bildschirmauflösung immer die optimale Bildgröße geladen wird, was sowohl die Performance als auch das Nutzererlebnis verbessert.
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)
Bildgröße
Shopware empfiehlt zwar eine Bildgröße von 600x600px, allerdings ist diese Größe in den Standard-Thumbnail-Einstellungen (siehe oben) nicht enthalten. Das bedeutet, dass Shopware bei den generierten Thumbnails kleinere Bilder hochskalieren muss, was zu Qualitätsverlusten führt.
Um eine optimale Bildqualität zu gewährleisten, empfehlen wir:
Bilder in einer passenden Größe hochladen
Am besten 1920x1920px, da Shopware standardmäßig ein 1920px Thumbnail generiert.
Alternativ 800x800px, wenn du das 1920px Thumbnail deaktivierst.
Falls du eine Zwischengröße bevorzugst, kannst du die Thumbnail-Einstellungen anpassen und z. B. 1200x1200px als zusätzliche Größe hinzufügen.
Performance berücksichtigen
Produktbilder sollten weder zu klein noch unnötig groß sein. Wähle eine Größe, die eine gute Balance zwischen Bildqualität und Ladezeit bietet.
Produktbilder sollten gut komprimiert sein, um die Dateigröße möglichst gering zu halten.
Empfohlene Bildoptimierung
Thumbnails anpassen: Passe die Thumbnail-Größen in der Medienverwaltung an dein Shop-Design an und entferne ggf. unnötige Formate. So verhinderst du überflüssige Daten und stellst sicher, dass Bilder in der optimalen Größe und Qualität geladen werden.
Bilder gut komprimieren: Unkomprimierte Bilder können die Ladezeit des Shops erheblich verlangsamen. Nutze Tools wie TinyPNG, um die Dateigröße zu reduzieren, ohne sichtbaren Qualitätsverlust.
Moderne Bildformate nutzen: WebP bietet eine deutlich bessere Komprimierung als JPG oder PNG bei gleicher oder sogar besserer Bildqualität. Shopware unterstützt WebP nativ, sodass sich dieses Format für schnellere Ladezeiten und bessere Performance empfiehlt.
Automatische Bildoptimierung: Im Shopware Store gibt es Erweiterungen, die Bilder automatisch optimieren, sobald sie hochgeladen werden. Diese Tools übernehmen die Komprimierung und Konvertierung in WebP, sodass keine manuelle Bearbeitung erforderlich ist.
Wir empfehlen, Bilder mit mindestens 1920x1920px hochzuladen, da dies den Thumbnail-Voreinstellungen entspricht.
Tipp: Wir empfehlen alle Produktbilder mit den selben Proportionen und in einem einheitlichen Format (Quer-, Hochformat oder quadratisch) zu nutzen.
Hinweis: In unseren Demoshops verwenden wir 1200x1200px 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:
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?
