[Support request] Blurry Woocommerce images

[Anna]

Hello, I have a problem with product images on my site. They are blurry on product page, but when I refresh the same page they get sharp. I used “regenerate thumbnails” but it didn’t work. I tried to make page width smaller, but it didn’t help too. Customizer did’t help too – image sizes on product page are 400px, but theme doesn’t seem to see that. It happens only when I have GP as a theme. When I have for example twenty seventeen all images are ok.

Also second question, is there any way to change the proportions of thumbnails displayed under big image? They are square now, but my images are in proportion 3×4.

GeneratePress 2.1.4

GP Premium 1.7.2

[David]

Hi there,

GP uses the base Woo templates, the single product page columns are 48% of the container width, so your product image is being output at 525px. So you would need to increase the image size or reduce the container width.

The gallery thumbnails can be adjusted using this filter:

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
    return array(
        'width'  => 100,
        'height' => 133,
        'crop'   => 0,
    );
} );

https://docs.generatepress.com/article/adding-php/

Note: crop => 0 is uncropped, change this to 1 to crop the image. You will need to regenerate thumbnails afterwards.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anna]

None of these work for me 🙁 They are still blurry on product page, they get sharp only when I refresh the page.

[David]

Can you try opening the page in an incognito / private browser?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anna]

Yes, and the result is still the same.

[David]

the images are still being output larger than 400px. Have you tried increasing the Product image size to say 600px?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anna]

My images size is 573×784. It is not the fault of their size, because when I refresh the page they are sharp. It’s even ok when I just move the browser window and then they are suddenly getting sharp.

[David]

This is what i am seeing:

https://www.useloom.com/share/305482570eb746a2b9a1f1e926e8bb67

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anna]

Sorry, but I can’t see on this video if images are blurry or not 🙁 The video is blurry itself 🙂

But here are my screenshots, before and after refreshing the page (or moving browser window): https://we.tl/t-MT23pPP5d5.

[David]

Its odd, as i am not seeing a change in quality when refreshing or adjusting the browser. This sounds like a caching issue or another plugin such as Jetpack Photon effecting the images.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anna]

I do not have jetpack, it is very odd because I also tried two other computers and other browsers and problem is the same. Nothing helps. But it happens only when GP is activated 🙁

[David]

Strange. To eliminate any resizing issue can you set your product image width to 473px – which is the exact container size. Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anna]

Ok, reducing container width + setting image width to original (573px) helped. It’s not 100% quality but it’s much better now 🙂 Thank you.

Do you have any idea about my second question: is there any way to change the proportions of thumbnails displayed under big image? They are square now, but my images are in proportion 3×4.

[David]

Thats great. May be worth considering uploading an image that is twice the size of the woo product image size. Then when it is resized by Woo it will be an exact 50% reduction which reduces the chances of pixel artefacting / blurring. Also you have an image twice the size which would be used in the Zoom or lightbox.

Did the above filter not work for resizing the gallery thumbs?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts