Blur photos in Product Archive Page

Support
#1

Hello,
I wonder if you can help me unravel this mystery in Woocommerce :
on the overall page of my Product Archive (which is called “Our Menu” on my website), if a visitor using a phone clicks the categories, the page displays one “Product Image” of each product. But the images all appear blur & pixelated - as if they have been stretched.

But when the Product Image is clicked & the visitor enters the page for that product itself, the images are sharp & clear. Please see attached screenshots. I hope you can see the difference between the 2.

Could you tell me what’s the problem?

#2

Hello @iamwithU,

Thanks for asking. :slight_smile:

I see that you are using WooCommerce version 3.5. As of today supported version of WooCommerce is 3.5.1. Please downgrade WooCommerce to the supported version to avoid any compatibility issues. You can also check the link below for more details on how to fix blurred images.

Let us know how it goes.

Thanks.

#3

Hi Prasant,
Thank you for prompt response.

I read the document mentioned by you & it says:
“To solve this:
Your image dimensions should match or be higher than those of your theme.”

May I know if the “theme” referred to means X Theme? How do I know what are the image dimensions prescribed in X?

#4

Hi there,

Please check your settings in WP Admin > Appearance > Customize > Woocommerce > Product Images then try increasing the width and height value.

Hope this helps.

#5

Hi Jade,
Thanks for your kind response.
My image in the media library is 1558 x 1558.

For my current settings, my “main image width” is 400.
Are you suggesting I increase to 1558?

My “thumbnail width” is 250. Which width should I increase?

I thought blurry images is caused by an image (with low resolution) being made bigger? Not an image with high resolution being made smaller?

How is it that my image looks sharp when one enters into the product page, but is only blurr in the “Shop” page (in my website, it’s called “My Menu”)? From what I see, this problem happens on the phone screen, not on my laptop screen.

#6

Hi,

Try to increase your thumbnail image to 400. When I go to your shop page, I can see it is being displayed with at 268px width but the original image size 250px width which makes it blurry.

If you change the thumbnail width to 400, it will display the image at 268px but original image will be 400.

Make sure to regenerate your thumbnails after changing the width in Customizer

Thanks

#7

Hi Paul,
Thanks for advice. I changed my thumbnail width to 400 as suggested.
After that on my dashboard, I notice the message “Thumbnail regeneration is running in the background”.

Do I still have to do anything else?

#8

Hello @iamwithU,

Please allow the plugin to work on the the thumbnail regeneration behind the background. You must clear your caching plugin first if you have installed one before testing the site.

By the way, Pro 2.4.6 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#9

Thanks Ruenel.
Hmm, but I did not install a plugin for thumbnail regeneration so that’s why I’m surprised that it’s happening in the background without me doing anything.

How do I confirm that all the other thumbnails are regenerated?

#10

Hi,

I checked and the images are now 400x440 instead of 268x250 which means it has successfully regenerated.

Can you please clear your browser cache and check if the images are still blurry in your end.

Thanks

#11

Thanks Paul, for prompt response & checking for me. My Shop page images look much better now on my phone.

For my learning, could you enlighten me what plugin I have that helps to regenerate the thumbnails?

Also, in your previous reply, you said:
My image was displayed at 268px.

Could you tell me what setting made the image display at 268?

#12

Hello @iamwithU,

We cannot tell which plugin you have since we do not have access to your WP dashboard.
For sure, only force regenerate thumbs and regenerate thumbnails plugin are the most used plugin that do the regeneration of image sizes.

Hope this helps.

#13

I had earlier in my first post provided my access to my WP Dashboard.
Funny thing is I don’t have the 2 plugins you mentioned.

So is there anyone else who’s patient enough to teach? Also, my question - what made my images display at 268px?

#14

Hi @iamwithU,

There is actual width and there is a rendered width. The actual width is the one with actual pixel like 400px, while the rendered width is the percentage display width of the current image relative to its container. Which means, it’s a scaled width so if a container has 286px then the image with 400px actual will still be rendered 286px.

Example, let’s say you viewed it on a 1440px screen, and since it has 5 columns then divide it to get the width of each column.

1440/5 = 288px ( spacing is excluded from calculation so it’s a bit different than 268px you’re getting )

Making a 400px to be displayed as 400px kills the responsive nature of a layout and the image. So 400x5 = 2000px, so it’s like forcing a 2000px design to a 1440px display which of course, not responsive anymore.

And to answer your question why it’s blurry, is because 400px is still smaller than 767px (mobile view). The 5 columns break into single column once viewed on mobile, hence whichever device it’s viewed, the image will scale to it equally. So the 400px is stretched to 767 and became blurry.

So what you need is a 767px image to make it less blurry, but how about the tablet and medium devices and retina devices? Yes, they will still blurry. So the best workaround is uploading an image with equal width to your biggest target device. Even retina display requires double the resolution so 980px - 1500px is a normal resolution.

As a summary, your chosen 400px is still small compared to the devices you’re testing it width.

Thanks!

1 Like
#15

Wow Rad, that’s superbly helpful & instructional. I learn so much from that. Would you be so kind to stay with me on this?

Can you clarify what you mean in your last line:

“your chosen 400px”? Are you referring to my “thumbnail width”?

That’s what Paul advised me to change my "thumbnail width:

Are you suggesting that I change my thumbnail width to [quote=“Rad, post:14, topic:51440”]
980px - 1500px
[/quote] or to 767px so that it looks sharp on mobile view?

Can you also help me to understand what is that I have that helped me to regenerate the thumbnails? I am not aware I have a plugin that does that. Also what is the difference between “thumbnail width” and “main image width” in the

Thanks for your help.

#16

Hi @iamwithU,

Yes, please change the thumbnail size to around 767px if you’re only planning to optimize it for mobile, or 980px - 1500px if you’re planning to optimize it from mobile to larger devices like retina.

Thumbnail regeneration is always required everytime you change the registered image sizes. Changing it on the setting will only change it on the database but not the actual image, hence, please always regenerate it. But I’m not sure if I can answer your question about the plugin and how it’s added there. I’m using force regeneration thumbnail plugin too but could be different since I have to initiate the process manually.

The thumbnail width is the width registered by Woocommerce. A theme or any plugin could register their own sizes, it’s like telling Wordpress that I wan't an image of this size so please serve me one. Then Wordpress will serve the generated image equal to the requested size of the theme or plugin and it’s generated from the main image width (the one you originally uploaded).

And, it can only generate images IF the registered or requested size of the theme or plugin is smaller that the main image width (the one you originally uploaded). Example, you originally uploaded ah 450px image, but Woocommerce requested a 767px image, then that will not happen. It will still use 450px. So it’s okay if you’ll upload big images since Wordpress will create multiple copies of different sizes :slight_smile:

Hope this helps :slight_smile:

Side note: Image regeneration is only applicable for already uploaded images (before you change the thumbnail size). Newly uploaded images will be generated automatically by Wordpress without a plugin.

#17

Thank you Rad, for enlightening me.

I appreciate all that you have mentioned. I will increase both the “thumbnail width” and “main image width” to 1500.

#18

You’re most welcome!

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.