Bilder organisierst du in Shopware 6 über die Medien-Verwaltung bzw. den Medienmanager. Diesen findest du über die Hauptnavigation Inhalte > Medien deiner Administration.
Folgende Dateitypen können über den Medienmanager hochgeladen werden:
jpg, jpeg, png, webp, gif, svg, bmp, tiff, tif, eps, webm, mkv, flv, ogv, ogg, mov, mp4, avi, wmv, pdf, aac, mp3, wav, flac, oga, wma, txt, doc, glb
In der Medien-Verwaltung gibt es verschiedene, vorinstallierte Ordner in welchen du deine Bilder organisieren kannst.
Lädst du Bilder über Upload-Felder (Beispielsweise in Erlebniswelten) hoch, sortiert Shopware die Bilder für dich automatisch ein.
In den Einstellungen der einzelnen Ordner hast du die Möglichkeit Thumbnail-Größen und die Qualität der Thumbnails für alle Bilder in diesem Ordner zu definieren.
Shopware nutzt von Haus aus Thumbnails von 400x400, 800x800 und 1920x1920 Pixeln. Für Produktbilder werden zudem auch Thumbnails mit 280x280 Pixeln generiert.
Hersteller-Logos haben Thumbnails mit 200x200, 360x360 und 1920x1920 Pixeln.
Wählst du ein Bild aus, kannst du im Abschnitt "Metadaten" den Dateinamen bearbeiten. Wir möchten an dieser Stelle aber besonders auf den "Alt-Text" und "Titel" hinweisen. Darin kannst den Alt-Text und den Meta-Titel des Mediums ändern.
Die Frage nach der perfekten Bildgröße im fluiden Webdesign lässt sich nicht pauschal beantworten. Es kommt immer darauf an, wofür ein Bild genutzt und wie groß es dargestellt wird.
Mehr Informationen dazu findest du in folgendem Artikel:
Mehr Informationen zum Medienmanager findest du in der Shopware-Dokumentation:
Der Anzeigemodus oft auch Darstellungsmodus für Bilder legt fest, wie ein Bild in der Größe angepasst werden soll, damit es in seinen Bild-Container passt.
Das Bild behält sein Seitenverhältnis, wird aber an die Höhe des Bild-Containers angepasst.
Dies führt dazu, dass es links und rechts bzw. oben und unten Lücken geben kann wenn das Seitenverhältnis vom Bild in einem Viewport nicht mit dem Seitenverhältnis des Bild-Containers übereinstimmt.
Die Größe des Bildes wird so angepasst, dass das Seitenverhältnis beibehalten wird und der gesamte Bild-Container ausgefüllt wird. Jeglicher Überlauf wird zugeschnitten.
In diesem Modus wird der Bild-Container in jedem Viewport ausgefüllt. Dies führt dazu, dass das Bild links und rechts bzw. oben und unten "abgeschnitten" wird, wenn das Seitenverhältnis vom Bild in einem Viewport nicht mit dem Seitenverhältnis des Bild-Containers übereinstimmt.
Das Bild wird ohne Höhenbeschränkungen auf die Breite des Bild-Containers skaliert.
Dies führt dazu, dass es oben und unten Lücken geben kann wenn das Seitenverhältnis vom Bild in einem Viewport nicht mit dem Seitenverhältnis des Bild-Containers übereinstimmt.
Die Größe des Bildes wird nicht geändert.
Das Bild wird auf die kleinste Version von none oder contain verkleinert.
Dies führt dazu, dass es links und rechts bzw. oben und unten Lücken geben kann wenn das Seitenverhältnis vom Bild in einem Viewport nicht mit dem Seitenverhältnis des Bild-Containers übereinstimmt.
Im Medien-Manager von Shopware 6 findest du in der Regel verschiedene Standard-Ordner für unterschiedliche Medientypen. Sollte einer oder mehrere dieser Ordner fehlen, kannst du sie ganz einfach selbst erstellen.
Gehe zur Medienverwaltung im Admin unter Inhalte > Medien. (1) (2)
Klicke oben rechts auf "Neuen Ordner hinzufügen". (3)
Vergib einen passenden Namen für den Ordner (z. B. "CMS Media").
Wähle die Option "Einstellungen" im Kontext-Menü des neuen Ordners. (4) (5)
Wähle im Feld "Medien-Standardspeicherort für", für welchen Bereich der Ordner verwendet werden soll – z. B. "cms_page (Layout)". (6)
Speichere die Änderung. (7)
Der neue Ordner wird nun automatisch für den gewählten Bereich verwendet – z. B. beim Hochladen von Bildern in CMS-Elementen.
Im Medien-Manager von Shopware 6 findest du in der Regel verschiedene Standard-Ordner für unterschiedliche Medientypen – z. B. für Produkte, Kategorien, CMS-Inhalte usw.
| | Mail Template Media | mail\_template (E-Mail-Template) | Thumbnail-Qualität: 80 |
Thumbnails für diesen Ordner generieren
Seitenverhältnis beibehalten
| | Payment Method Media | payment\_method (Zahlungsart) | Thumbnail-Qualität: 80 |
Einstellungen vom überliegenden Ordner übernehmen
Thumbnails für diesen Ordner generieren
Seitenverhältnis beibehalten
| | Product Manufacturer Media | product\_manufacturer (Hersteller) |
200x200, 360x360, 1920x1920 Thumbnail-Qualität: 80
|
Thumbnails für diesen Ordner generieren
Seitenverhältnis beibehalten
| | Product Media | product (Produkt) |
280x280, 400x400, 800x800, 1920x1920 Thumbnail-Qualität: 80
|
Thumbnails für diesen Ordner generieren
Seitenverhältnis beibehalten
| | Shipping Method Media | shipping\_method (Versandart) | Thumbnail-Qualität: 80 |
Einstellungen vom überliegenden Ordner übernehmen
Thumbnails für diesen Ordner generieren
Seitenverhältnis beibehalten
| | Theme Media | theme (Theme) | Thumbnail-Qualität: 80 |
Einstellungen vom überliegenden Ordner übernehmen
Thumbnails für diesen Ordner generieren
Seitenverhältnis beibehalten
| | User Media | user (Benutzer) | Thumbnail-Qualität: 80 |
Thumbnails für diesen Ordner generieren
Seitenverhältnis beibehalten
|
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.
Grundsätzlich empfehlen wir dir, für Erlebniswelten und Logos die Vorlagen der mitgelieferten PSD-Dateien zu nutzen.
Die Shopware 6 "Medienverwaltung" nutzt standardmäßig folgende Thumbnail-Größen:
Category Media
category (Kategorie)
400x400, 800x800, 1920x1920 Thumbnail-Qualität: 80
Thumbnails für diesen Ordner generieren
Seitenverhältnis beibehalten
CMS Media
cms_page (Layout)
400x400, 800x800, 1920x1920 Thumbnail-Qualität: 80
Thumbnails für diesen Ordner generieren
Seitenverhältnis beibehalten
Imported Media
import_export_profile (Import/Export-Profil)
400x400, 800x800, 1920x1920 Thumbnail-Qualität: 80
Einstellungen vom überliegenden Ordner übernehmen
Thumbnails für diesen Ordner generieren
Seitenverhältnis beibehalten
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.
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.
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)
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.
Wir empfehlen, Bilder mit mindestens 1920x1920px hochzuladen, da dies den Thumbnail-Voreinstellungen entspricht.
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.
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:
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).
Nutze gerne unsere Pagespeed optimierte Logos für Versandanbieter. Über 40 Logos im ressourcenschonenden SVG-Format erhältst du im Downloadpaket der ThemeWare® Utilities.
Nutze gerne unsere Pagespeed optimierte Logos für Zahlungsanbieter. Über 90 Logos im ressourcenschonenden SVG-Format erhältst du im Downloadpaket der ThemeWare® Utilities.
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: Ü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.
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.
Hinweis: Mehr Informationen zum Anzeigemodus von Bilder findest du im Artikel .
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.
