There is no ‘common’ for all unfortunately. If you want to avoid multiple sizes then you have to check your viewport breaking points ( that is where your page starts the change for each device ) and see what is the biggest image size generated. In your case it would be arround 700x700px, you can easily check it by resizing your browser’s width until you reach the tablet chaning point where your images go 100% width.
The correct idea is to set up multiple sizes, that is why there is the ‘srcset’ attribute in images nowdays. This means the best size will be automatically rendered depending the view.
You can read more about it HERE.
To set it up correctly you will have to change the WooCommerce / WordPress / or even theme media settings accordingly to your likings depending what you want to achieve. That’s something you have to figure and configure out your own.
Tip: your images already have srcsets so just play arround with Large / Medium / Thumbnail sizes and simply upload bigger pictures, WordPress will automatically regenerate smaller pixel version for the smaller viewports.
Example: in my site I upload 1300px wide images but they are automatically get also to 800px + 300px width. So Desktops: 1300, Tablets: 800, Phones: 300.
Again that depends on the design etc.
Hopefully this helps you understand the reasoning behind automatic thumbnails and how things work correctly.
Best regards,
Konstantinos
