Image optimisation

[JeRoNZ]

The product list and product detail templates output a one-size-fits-all thumbnail using an tag. While this works, it doesn't allow for the image size to be optimised for the device that's viewing the page. It gets worse when you consider a list of products that are say 4 across the grid - the maximum size of the image will decrease and then increase again depending on the responsive breakpoints. In addition, there are device pixel densities to consider.

Why does this matter? Google. https://pagespeed.web.dev moans that I can save several hundred kB if I optimise images and lowers the page speed index accordingly. Page speed is one of the factors they use to decide page rank. Therefore the better images are optimised, the higher the speed index and presumably, the higher the rank.

I'm wondering if perhaps the two blocks might benefit from a few settings to control what size(s) of image are output, in essence allowing a custom tag or tag with a srcset attribute to be output, with the default thumbnail being the fallback image. This gives the user the ability to take into account the breakpoints of their theme, and the number of columns in the grid to get the right outcome.

[Mesuva]

I agree It probably makes sense to swap this out for a picture element as default, or at least more controls.

Image handling has been a bit fiddly with Community Store over the years as it has options of using thumbnails, as well as more manual resizing of images ('legacy').

I think I've always had it mind that more often than not a developer is going to create their own custom block templates (I'm literally doing that this morning), so they'd control what it's outputting that way. But if the default template is more useful in the first place that can only be a good thing.

[JeRoNZ]

Hehe. Yeah, me too. Hence the reason for raising the issue.

I was thinking that if we did something similar to how the version 9 image block works when you choose the "Configurable" option, that might be a good start. It references the $resonsiveImageMap setting in the theme, so it knows what the responsive breakpoints are and can therefore output a picture tag with suitable sizes.