Responsive image resize
![responsive image resize responsive image resize](https://www.uiuxkits.com/wp-content/uploads/2022/04/responsive-resize-ui-kit-xd-1014x487-1-788x378.jpg)
In other words, we can choose which image is displayed at which viewport size or device pixel density. Inside the picture element we can define multiple image sources and determine their visibility using a media query like syntax in the media attribute. To ensure support for outdated browsers we are using the picturefill.js polyfill. It is part of the official W3C standard and is supported by most of the latest browsers. The picture element takes the term "responsive" even a little step further. In convention the high dpi display image names are suffixed with a
![responsive image resize responsive image resize](https://cdn2.iconfinder.com/data/icons/graphic-design-items/512/Graphic_Design_icons-25-512.png)
Depending on the screen density, one of the two pictures is displayed. 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. This example is the Shopware equivalent to the basic tag.
#RESPONSIVE IMAGE RESIZE GENERATOR#
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. Alternatively you can generate the thumbnails by using the sw:thumbnail:generate Shopware CLI command. There is also the possibility to create thumbnails that have doubled pixel density, to improve the experience for high dpi display device users. This ensures a good performance and usability on the different device types. It has a thumbnail generator service that creates thumbnails of your original pictures in sizes you are able to configure beforehand. The media manager allows you to upload pictures with large file sizes without having to worry about downsizing them manually. Shopware's solution for this problem is the thumbnail generator in combination with the picture element. Therefore, the optimal size of the images is often a question. Working with static widths is a thing of the past. This quick tip will introduce you to the "responsive" way of working with images in the Shopware Responsive theme. The Shopware default Responsive theme is a fully responsive cross-browser compatible high definition ready theme. Register a cookie to the cookie consent managerĬreate custom digital publishing elements