My WooCommerce thumbnail has been set to 400px width. However 400px width thumbnails are loaded only in laptops having 720p display.

In laptops with 1080p screens, the thumbnail loads at 768p and worst of all, in my huawei mate 20x with a 1080p screen, it loads at full size (1024px).

This makes the shop page unnecessarily large. I want to control the thumbnail width that are displayed at various display viewports.

I just want to serve two sizes 300px and 500px depending on viewport size. How do i do that?

Also I would like to know how to serve one size WooCommerce thumbnail (500px) across all devices (disable responsive image).