[Resolved] Fuzzy image problem

[Kevin]

Do you know what is causing the problem with fuzzy images on product listing & detail page?
Image looks fine when it’s enlarged by clicking on the image but it’s very fuzzy rest of the times.

[David]

Hi there,

It generally happens if the image is being rescaled to fit the space.

If you right click inspect the single product image it shows the image is being displayed at 630px wide.

This is because the Customizer > Layout > Woocommerce -> Product Image Area Width is set to 50% and your Container is set to 1260px. ie. 1230px x 50% = 630px.

However the Customizer > Woocommerce > Product Image –> Main Image Width is set to 600px.

You can either reduce the Container width to 1200px or increase the product image to 630px.

For the shop page – the images are being displayed at 380px ( Desktop 3 column ), 475px ( large tablet 2 columns ) – and the Customizer > Woocommerce > Product Image –> Thumbnail Width is set to 480px.

For the thumbnail you may want to increase the size of the image. Maybe as much as 760px – to double up the available pixels.

[Kevin]

Then could I just set both main image width and thumb width to 630px?
Also, do I need to re-generate thumbnails?

[David]

Yep you could do that.
Woo will ( should ) auto generate those thumbnails for you.

Before you do that – what was the original full image size you uploaded?

As the other thing to consider to avoid fuzzy images is the ratio between the original image and the scaled down image.
For example a 1200px image scales down better to 600px ( halves the pixels ) then it does down to 630px

[Author]

Posts