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.
Use the ThemeWare® PSD files
Basically, we recommend you to use the PSD files provided for the Shopping Experiences and the shop logos.
Note: Via the ThemeWare® Utilities you can get all graphics as PSD files and access to our free online course "Graphic Design".
Tip: In case of fundamental changes in the thumbnail generation of Shopware, we update these 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. 1920 pixels is therefore a good starting point.
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.
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 1200x1200 pixel product images for visual reasons.
Standard (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.
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 for 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:
pageLogo einbindenpageLogo design tipsTheme 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).
Last updated
