Image sizes

Image size is the resolution of the image in pixels.

What resolution should the product images have?

Thumbnails

Basically the media management of Shopware generates the configured Thumbnail sizes (1) of the uploaded images. Thus, the original image is available in different resolutions and the storefront can provide an optimized variant of the image for each screen resolution and device.

The Thumbnail quality (2) of these calculated thumbnail images is also optimized in this step in order to improve the loading times of the storefront.

Thumbnail sizes (maximum edge length)
400x400 pixels
800x800 pixels
1920x1920 pixels

Minimum resolution

So that Shopware can calculate these thumbnail sizes, you should provide images with a minimum resolution of 1920 pixels at the longest edge length - because thumbnails generation cannot enlarge your images.

The different image sizes (thumbnails) are then output in an srcset in the page's code. srcset is an HTML attribute used in conjunction with the img tag to provide multiple image sources to the browser. These sources have different resolutions or sizes to ensure optimal viewing on different devices.

However, when using srcset in the HTML tag for images, the browser only takes the width of the image into account.

For optimal display, images should have a minimum width of 1920 pixels.

If the resolution of the images is too small for the display area, so that they are not displayed in a filling way, you can set the stretch display mode. This way the images are stretched beyond their actual size and are displayed filling.

You can find the display mode settings in many cms image elements, but not in the listing element.

Image settings tab from the teaser element

Zoom & fullscreen gallery

The theme offers the possibility to zoom the images on the product detail page by mouseover and to open a fullscreen gallery by clicking on the image. Among other things, Shopware uses the original uploaded image for this purpose.

To be able to use these functions meaningfully, you should provide product images with a higher resolution than the minimum resolution mentioned above. Nowadays, common monitors have at least an HD resolution (1920x1080).

Depending on how detailed a customer should be able to view the products using high-resolution images, you can also upload much larger original images of your products to Shopware.

Pay attention to the file size of the images. The original image in the zoom function is not additionally compressed, unlike the thumbnails of Shopware.

However, it is only loaded when the zoom function is activated by mouseover or when the fullscreen gallery appears by clicking on the product image.

Mobile devices

If you think that product images on mobile devices such as tablets and smartphones are smaller than on a desktop monitor, think again. Mobile devices in particular have high-resolution displays with up to 3 times the pixel density (device pixel ratio) of a standard monitor (not Retina).

Simplified, this means that an image must be at least 999x846 pixels in size on an available area of 333x423 pixels. The srcset of the img element holds all thumbnails of the store as well as the original image. The browser now selects the 1920x1920 pixel thumbnail to fill the available area.

Problem with too small product images

So that Shopware can calculate the thumbnail sizes correctly, you should provide product images with a minimum resolution of 1920 pixels wide. If the images are in a lower resolution, the images in the storefront of your shop will not scale correctly. Strictly speaking, this is not a direct problem with Shopware, but with the architecture of .

Note that this problem is mostly noticeable in mobile display and images do not always fill the available space.

But what happens if the product images do not have the sufficient resolution of 1920px in width? Then we occasionally receive messages and screenshots that show us a detail page in which the image cannot completely fill the available area. We explain why this is the case below.

Example:

In the following live code example there are two completely identical srcsets, as used by Shopware on the details page to display the gallery slider.

By default, Shopware calculates the following thumbnail sizes, which are then displayed in an srcset:

Thumbnail sizes (maximum edge length)
400x400 pixels
800x800 pixels
1920x1920 pixels

In srcset-A we have a resolution of 788x1000px as the original image - actually too small for Shopware.

srcset-A

<img src="https://src.zenit.design/codepen/wrong.jpg" 
    srcset="https://src.zenit.design/codepen/wrong_800x800.jpg 800w,
    https://src.zenit.design/codepen/wrong_400x400.jpg 400w,
    https://src.zenit.design/codepen/wrong_1920x1920.jpg 1920w">

In srcset-B we have a resolution of 1920x2694px as the original image - so big enough for Shopware.

srcset-B

<img src="https://src.zenit.design/codepen/correct.jpg"
    srcset="https://src.zenit.design/codepen/correct_800x800.jpg 800w,
    https://src.zenit.design/codepen/correct_400x400.jpg 400w,
    https://src.zenit.design/codepen/correct_1920x1920.jpg 1920w">

When calculating the thumbnails from srcset-A, the image with the original size of only 788x1000px is stored in the 1920x1920 thumbnail. This means that the image is smaller than what is reported to the browser in the srcset by specifying the 'w' attribute of 1920w (line 4).

An srcset is responsible for delivering and “rendering” the appropriate image. To do this, a pixel density is calculated using the information and applied to the selected thumbnail.

Although, as mentioned at the beginning, the problem mainly occurs on mobile devices, here we are looking at a desktop device with a simple DPR. In order for the problem to be visible on desktop devices, we have to consider a viewport width that would display the 1920x1920 thumbnail.

In our live code example, it is displayed in this documentation platform with a viewport width of 1054px. The browser will not choose the 800x800 thumbnail because it is too small for the viewport's display area. So the 1920x1920 thumbnail is selected - exactly right for our example:

Calculate displayed image size:

To calculate the displayed image size (or rendered size), the first step is to determine the pixel density in order to determine the rendered size of the image: Formula pixel density: viewport width / 'w'-attribute = pixel density Formula Rendered size: Pixel density * native resolution = Rendered size

	srcset-A	srcset-B
Pixel density	1054px/1920w = 0,5489583	1054px/1920w = 0,5489583
Rendered size	0,5489583 * 788px = 432,6px	0,5489583 * 1920px = 1054px
Result	The image is displayed approx. 433px wide with a viewport width of 1054px.	The image is displayed approx. 1054px wide with a viewport width of 1054px.

As can be seen in the embedded live code example, the browser does not know that the 1920x1920 thumbnail contains an image that is too small. The image is scaled using the pixel density as a factor and is therefore displayed too small.

Therefore, please note that 'w' attributes are used to set the pixel density of the images. The widths of the thumbnails should therefore match the width specifications in the srcset.

More informations: https://issues.shopware.com/issues/NEXT-14066https://stackoverflow.com/questions/33933793/why-does-srcset-resize-image