What image sizes should I use with ThemeWare®?
The question about the perfect image size cannot be answered generally. It always depends on what an image is used for and how large it is displayed.
In this article we will give you some useful tips.
Tip: We recommend using images of the same size or at least images with the same proportions for each type of image.
Tip: Use the ThemeWare® PSD files
Basically, we recommend you to use the PSD files provided for the Shopping Experiences and the shop logos.
Tip: Via the ThemeWare® Utilities you can get all graphics as PSD files and access to our free online course "Graphic Design".
Note: In case of fundamental changes in the thumbnail generation of Shopware, we update the ThemeWare® PSD files. Look out for corresponding notes in our Service Portal.
General information
The Shopware 6 "Media Management" (Media Manager) uses the following thumbnail sizes by default:
400x400 pixel (W x H)
800x800 pixel (W x H)
1920x1920 pixel (W x H)
Just upload a sufficiently large image. Shopware automatically generates the corresponding thumbnails in the sizes mentioned above. The thumbnails are used in the storefront, depending on the viewport. 1920px or larger is therefore a good starting point.
Manufacturer logo
Shopware 6 Media Manager uses the following thumbnail sizes for manufacturer logos by default:
200x200 pixel (W x H)
360x360 pixel (W x H)
1920x1920 pixel (W x H)
This means you should upload these logos in a size of 1920x1920px or larger so that sufficiently large thumbnails are loaded in every browser and every viewport.
Category images
Shopware 6 Media Manager uses the following thumbnail sizes for category images by default:
400x400 pixel (W x H)
800x800 pixel (W x H)
1920x1920 pixel (W x H)
This means you should upload these images in a size of 1920x1920px or larger so that sufficiently large thumbnails are loaded in every browser and every viewport.
Product images
To ensure a good performance, you should not use images that are too large. Shopware generates suitable thumbnails for each image for different viewports (see above) which is very good for performance.
Shopware recommends square product images with a resolution of 600x600 pixels for optimal display. In general other resolutions are possible as well.
Shopware 6 Media Manager uses the following thumbnail sizes for product images by default:
280x280 pixel (W x H)
400x400 pixel (W x H)
800x800 pixel (W x H)
1920x1920 pixel (W x H)
Tip: We recommend using all product images with the same proportions and in a uniform format (landscape, portrait or square).
In our demo shops, we use 1200x1200px product images for visual reasons.
However, we recommend uploading images with 1920x1920px or larger due to the thumbnail default settings.
Original (formerly "Standard") or "Fixed height" [contain]
Product images in the listing are stretched by default. This means that the product images (red border) are scaled to the height or width (depending on whether the image is in portrait or landscape format) of the designated area (blue border) to make sure the image is fully visible. The designated area is not necessarily filled. The proportions of the product images are preserved.
Cropped [cover]
In the "cover" display mode, product images (red border) are scaled so that the designated area (blue border) is completely filled. The smallest side is scaled to the width or height (depending on whether the image is in portrait or landscape format) of the designated area, the rest of the image will be hidden. The proportions of the product images are preserved.
Note: More information about the display modes of images can be found in the article Display mode of images.
Shop-Logo
You can find the ideal image size for your theme in the PSD files in the ThemeWare® Utilities.
More information and useful tips on the topic "shop logo" can be found in the following articles:
Theme preview image
The theme preview image for theme duplicates is displayed with 225x120px. This is the minimum size the image should have. The Shopware default theme uses a 228x138px sized image.
Larger images will be centred and scaled. Using the CSS Property "cover", the image retains its aspect ratio and is scaled so that it is displayed as small as possible but completely covers the available area of 225x120px.
We recommend that you use the proportion of 225x120 pixels. However, the automatic scaling also allows a larger image (e.g. 250x133px, 300x160px, 380x202px or 450x240px).
Shipping method logos
Feel free to use our pagespeed optimised logos for shipping providers. Over 40 logos in resource-saving SVG format are available in the ThemeWare® Utilities download package.
Payment method logos
Feel free to use our pagespeed optimised logos for payment providers. Over 90 logos in resource-saving SVG format are available in the ThemeWare® Utilities download package.
Last updated
