Image sizes
Image size is the resolution of the image in pixels.
Last updated
Image size is the resolution of the image in pixels.
Last updated
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 |
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/Scaled 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.
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.
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.
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.
In srcset-B we have a resolution of 1920x2694px as the original image - so big enough for Shopware.
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:
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 |
|
|
Rendered size |
|
|
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
