I have uploaded all product images at 403px x 403px.

And set the woocommerce images like this: https://tinypic.com/view.php?pic=15zmtlt&s=8#.VAcBTPldV2A

So when the website is in responsive mode. it displays catalog images fine: https://tinypic.com/view.php?pic=5oecjp&s=8#.VAcBmPldV2A

But ive noticed since doing this, the pages take longer to load? as i think they are calling up 403 x 403 instead of a smaller one: https://i60.tinypic.com/2h4cd95.jpg

Is there any way for wordpress/woocommerce to call on the image size that is right for the responsive mode that is being viewed. So the website is as fast as possible?

This is actually a very good question. By default woocommerce does not have it implemented. You could try looking for a plugin (if there is any) that handles such changes.

A second way is to do this manually by hooking into woocommerce templates and then detecting the device on a PHP level (Maybe use a detector class) and based on the device decide what image sizes to provide.

Also take into consideration that the user can come to the page in a “portrait” mode and once it is loaded they can rotate the device to a portrait mode which is wider so the images should be changed to bigger ones.

Also consider retina displays which need the images to be 2x bigger than the used size.

It is quite a lot of work to fine-tune it to your needs.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market