Catalogue images still blurry after updating Woocommerce

[creatorofstuff]

My product images are 800 x 800 px and they look fine on the product page, even with the zoom tool. (The crop is set to 600 x 600.) My catalogue crop is set to 300 x 300. The shop catalogue images are horribly blurry. I tried updating WooCommerce and creating another product. Same problem.

I then tried setting the catalogue crop to 600 x 600 with 2 columns. Ironically, the catalogue image looks like the exact same size as the individual product page version except it’s more blurry.

It seems the only way to make them look ok is to set the thumbnail width to 800px. Is it a bug? Unfortunately, the products have text on them and they need to be legible and clear. Is that going to increase my load time? Why do the “smaller” images look so bad?

I really appreciate your help.

[ruenel]

Hello There,

Thanks for writing in!

Please review this thread regarding blurry images: https://theme.co/apex/forum/t/resizing-woocommerce-images/1706
https://docs.woocommerce.com/document/fixing-blurry-product-images/

And also I noticed that you are using WP Rocket. You will need to clear your plugin cache first before testing your site.

Please let us know how it goes.

[creatorofstuff]

Hi,
Thanks for the reply. I had seen the Woocommerce page, which was good (except for the fact that their recommendation to change the sizes in WooCommerce > Settings > Products > Display > Product Images isn’t helpful since that option is not in that location. Perhaps it’s an old post. I had to dig around to find it).

By the way, your link leads to a music video! (It’s ok, I saw it on the WooCommerce page.)

So here is my question: I’m trying to understand how designating a larger catalogue image size in the settings (800x800) affects load time when the catalogue image is actually shown as 480x480. Does that slow things down? Because if I were to set it back to 480x480, for example, things get blurry. I am trying to make the site run as fast as possible while maintaining clear images. Does that make sense?

Note: I’m doing this on a test site so you would not see the images to which I refer. And yes, I do understand about clearing cache.

I very much appreciate your wonderful help.

[ruenel]

Hello There,

Thanks for updating in! Sorry for the link. I thought I have posted the thread link. I edited the post already and corrected the link.

Anyway, 800x800 compared to 480x480 image will have a slight impact in the file size of the image. But since if posting a smaller image get blurred when the image is zoom, it is better to use 800x800 instead. The difference is small enough and would somehow compensate on the results of how clear the image is presented. I do not think it would slow down your site big time.

Hope this helps.

[creatorofstuff]

Thanks so much. That’s helpful.

[ruenel]

You are most welcome!
We’re glad we were able to help you out.