Thumbnail Generation or Image File Sizes


I have discovered a somewhat ugly phenomenon in the thumbnail images, which I think is not good at all.

Let’s say I upload an image in the resolution 1920 * 600 as an original image. It has a file size of about 160kB. now take this picture as a banner in a shopping world. This has the width of 1920 px. The theme world uses probably by default the thumbnail image which was generated by Shopware. This generated thumbnail image is suddenly over 600kB in size. It’s just as wide as the original picture. Why is not the picture just left as it is with this thumbnail size?mobdro I find pictures so beautiful and my customers, of course, then I just invite a total of 7 pictures in the slider. Originally they were around 150kB in average. The fact that Shopware creates thumbnail from it and the image size is quadrupled in this case on average in the thumbnail generation, I then have a home page without my intervention and unintentionally 3150 kB larger than necessary. That’s what my customers are looking forward to.

I had an image optimization actually understood that optimized images are smaller than not optimized :wink: And that the whole subject image sizes is there to provide optimal images in the network. And I assume now (not? ;-)) that the problem with all thumbnails at Shopware is the case, right?

I’m curious about your answers. ;-)

tl;dr: It depends.

Long story:

Thumbnail generation exists for several reasons. First of all you can create thumbnail sizes that accomodate to your theme. Images can have just the size you need. Furthermore you can choose the quality setting. In a nutshell: lower quality equals lower file size. And last but not least: You can have retina (2x) versions of thumbnails – with its own quality setting.

What you need to understand is that the chosen optimizer is a fast one that hosting providers usually have installed. The default optimizer has no priority for smallest file sizes possible. (This is usually Guetzli. But it would take like forever to optimize thumbnails with it.) So it depends on what Shopware can use and what is installed on the server.

So what you should do is check your website with different display widths and create thumbnails accordingly – in order to match the actual image sizes in a browser. The thumbnail quality is a tradeoff between image quality and file size – choose what fit your needs. Retina thumbnails are nice to have and can improve the user experience.

You should also check if your theme does the best with these thumbnails. The frontend code needs to use the thumbnails in the right way in order to give browsers the option to choose the correct image size. Sometimes you have to optimize the templates in one way or another to get the most out of the thumbnail settings.

Finally there is a plugin that allows you to integrate webp thumbnails. This can further improve total page transfer size.