grid image size of loaded picture too large

Shopify Partner
119 8 41

I use minimal theme. When presenting product collections on the homepage, some images of products are shown.

While the size of the shown visible image is 220 x 220 px (square images), I'm wondering why the loaded image for that "preview" is actually the 360 x 360px image. I see that with right click on the image and "save as". The image is available in many different sizes as data widths such as 220px, 360px, 470px .... So why isn't the 220px image loaded for that 220px image preview?

It's a massive difference in terms of loading time if you put lots of images on your homepage, isn't it?

This is the original Minimal Theme I was referring to.

Now I created a custom collection presentation, similar to the original one, but with a horizontal slider function. If the image I show in this "preview" on the homepage is 275 x 275px, the loaded image is the 470px version, if I use 274 x 274 px, the loaded image is 360 x 360px. So there is the step, 275 px -> 470 px.

Does anyone know why this is such a big gap between the preview picture and the loaded picture?