The Shopware default Responsive theme is a fully responsive cross-browser compatible high definition ready theme. This quick tip will introduce you to the "responsive" way of working with images in the Shopware Responsive theme. Working with static widths is a thing of the past. Therefore, the optimal size of the images is often a question. Shopware's solution for this problem is the thumbnail generator in combination with the
The media manager allows you to upload pictures with large file sizes without having to worry about downsizing them manually. It has a thumbnail generator service that creates thumbnails of your original pictures in sizes you are able to configure beforehand. This ensures a good performance and usability on the different device types. There is also the possibility to create thumbnails that have doubled pixel density, to improve the experience for high dpi display device users. Alternatively you can generate the thumbnails by using the
sw:thumbnail:generate Shopware CLI command. Make sure to always upload the biggest possible version of your original image, as the thumbnail generator is only able to downscale from the original images' size.
800px x 800px
1280px x 1280px
1920px x 1920px
This example is the Shopware equivalent to the basic
<img src=""> tag. Instead of applying the
src attribute, we now have the opportunity to use the
srcset, which allows us to specify the original thumbnail and its high dpi optimized version in the same attribute. Depending on the screen density, one of the two pictures is displayed. In convention the high dpi display image names are suffixed with a
<img srcset="product.jpg, firstname.lastname@example.org 2x" alt="Produktfoto">
picture element takes the term "responsive" even a little step further. It is part of the official W3C standard and is supported by most of the latest browsers. To ensure support for outdated browsers we are using the
picture element we can define multiple image sources and determine their visibility using a media query like syntax in the
media attribute. In other words, we can choose which image is displayed at which viewport size or device pixel density. This fits perfectly well with the thumbnails that the thumbnail generator is able to create.
sizes attribute defines how the image is shown in the different viewports. A common unit is
vw which stands for viewport with and is the percentual width relative to the viewport.
picture element also contains a default
img tag, in cases the
media attributes do not match the browser viewport. The
src of the fallback image should be the largest thumbnail available.
<picture> <source sizes="(min-width: 48em) 80vw, (min-width: 64em) 50vw, 100vw" srcset="email@example.com 400w, firstname.lastname@example.org 1200w, email@example.com 2560w" media="(min-resolution: 192dpi)"> <source sizes="(min-width: 48em) 80vw, (min-width: 64em) 50vw, 100vw" srcset="product-small.jpg 200w, product-medium.jpg 600w, product-large.jpg 1280w"> <img srcset="product-large.jpg, firstname.lastname@example.org 2x" alt="Product picture"> </picture>
To learn more about the
sizes attribute, please refer to the Srcset and sizes blog post by Eric Portis.