Image sizes
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.
The ideal image size depends on your design and the level of detail you want.
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 good performance, you should not use unnecessarily large images. At the same time, it is important to optimize your product images sufficiently to ensure high image quality with the smallest possible file size. One advantage of Shopware is that suitable thumbnails for different viewports are automatically generated for each uploaded image (see above). This ensures that the optimal image size is always loaded, depending on the device and screen resolution, which improves both performance and the user experience.
Shopware 6 Media Manager uses the following thumbnail sizes for product images by default:
280x280 Pixel (B x H)
400x400 Pixel (B x H)
800x800 Pixel (B x H)
1920x1920 Pixel (B x H)
Image size
Shopware recommends an image size of 600x600px, but this size is not included in the standard thumbnail settings (see above). This means that Shopware has to upscale smaller images for the generated thumbnails, which leads to a loss of quality.
To ensure optimal image quality, we recommend:
Upload images in a suitable size
Best 1920x1920px, because Shopware generates a 1920px thumbnail by default.
Alternative 800x800px, if you deactivate the 1920px thumbnail.
If you prefer an intermediate size, you can customize the thumbnail settings and add 1200x1200px as an additional size, for example.
Take performance into account
Product images should be neither too small nor unnecessarily large. Choose a size that offers a good balance between image quality and loading time.
Product images should be well compressed to keep the file size as small as possible.
Recommended image optimization
Optimize thumbnails: Go to Media Manager and adjust the thumbnail sizes to match your shop design, removing any unnecessary formats as necessary. This helps to prevent redundant data and ensures that images are loaded in the optimal size and quality.
Compress images: Uncompressed images can significantly slow down the loading time of the shop. Use tools like TinyPNG to reduce the file size without any visible loss of quality.
Use modern image formats: WebP offers significantly better compression than JPG or PNG with the same or even better image quality. Shopware natively supports WebP, making this format recommended for faster loading times and better performance.
Automatic image optimization: There are extensions in the Shopware Store that automatically optimize images as soon as they are uploaded. These tools take care of compression and conversion to WebP, so no manual processing is required.
We recommend uploading images with at least 1920x1920px, as this matches the thumbnail presets.
Tip: We recommend using all product images with the same proportions and in a consistent format (landscape, portrait or square).
Note: We use 1200x1200px product images in our demoshops.
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
Was this helpful?
