Let’s summarize what we have seen regarding picture display:
Adapt the size of your picture by using souce set html element.
<picture> <source media="(min-width: 376px)" srcset="https://path/to/picture.jpg"> <source media="(max-width: 375px)" srcset="https://path/to/picture.jpg"> <img class="center" alt="alt text" src="https:// path/to/picture.jpg "> </picture>
Normalize the width and height of your picture
Normalize the width on your pictures. If slightly different picture width won’t look bad on a large screen, due to the width of the div being larger than the width of the picture, the picture grid might be completely jagged on a mobile display simply because the width of the div is not large enough to compensate for variation in the width of the pictures. That looks terrible. One reason you might want to have thumbnails of different width is when you have picture representing object of the same height but of different width. If you set the width to be the same on both type of object, the larger one might appear smaller (if you keep its proportion right, reducing its width will also reduce the heighth of the picture). It is not really desirable.
One colum display on small mobile screen
The second option that is used by most webshop is to switch to a one column display when the screen size goes below a certain point. That seems a sensible decision. The draw back is that you have to scroll through more “screens” to view all the products but at least you don’t have to dwarf large products compare to slim one or worse, have a completely jagged display.
Lazyload
Lazyload your picture, there are easy to use framework and the code is not difficult to implement.
Use large, high definition product pictures on product page
If you have an online store, people will want to check the product in detail: they will want to see the texture, the finish on the edges. Is it sharp or bezeled? etc. So give as much freedom as possible to your user to zoom in and look around your products, by having pictures of the product with different angles and zoom in some details.
Use webp
There are excellent solution available to serve webp to supporting browser without bothering with javascript. I recommend the Webp Express plugin for wordpress and webp on demand. For more options you can check my article on serving webp and jpeg2000.