Catalogue images resized

At the point in time when the web server is making the page, it doesn’t know what size the images will be displayed at, so it will use thumbnails of the size taken from settings. These are the images sent to the browser.

A few moments later, the browser will receive the images and resize them to fit the user’s device and the theme’s stylesheet. In your case, that will stretch the images, causing the blur.

So the way forward would be to either:
– adjust your theme’s style sheet to make the images show smaller.
– adjust WC settings so that the images are sent at the size they will be displayed at. (320px x 480px). You don’t need to be exact, just closer. Don’t make the size too big or your page load time increases unnecessarily.

As ever, if you change the image size settings you must regenerate the thumbnails. And of course the images that you are uploading in the first place must be good quality at that size or bigger.

Hi, thank you for the detail. I have tried all those things, I think!! I regenerated the thumbs and so on. If I make the main image smaller then there is a large gap between the image and the description. I change the image size then the image quality goes bad in one or all of the types, thumbnail, single product etc.

I seem to fix one thing but then lose another.

It’s very frustrating but it must be workable as woo commerce is widely used. Your help is really appreciated, thank you.

What should I have the WP image settings set too. I think these settings are what the image is turned into once uploaded. If this is incorrect when I have uploaded the images, will I need to re-upload them?

The WP image settings don’t apply here. Its the image settings in WooCommerce settings that apply. I don’t think you need re-upload the images.

It works best if all your images have the same, or similar aspect ratio. Yours seem to be all of a portrait orientation. If in future you need a landscape product image, you can get stretching or cropping and it doesn’t look so good.