Some browsers render my images blurry

Hi there,

In order to troubleshoot this further, please do the following:

• Share a copy of your status report as found under WooCommerce > Status; and
• Share a direct link to a product page where you’re seeing these blurry product images.

Thanks!

Hi @riaanknoetze, I’d rather not share the status report publicly as there is a lot of information in there that could be used to attack my website. Can I send it to you privately at some address?

Hello su1

Thank you for your reply.

You can use https://quickforget.com/ to share SSR with us.
For security, you can set the view limit to 2 times and set the expiry to 24 hours.

You can safely share direct link to your product here.

I look forward to your response. ??

@doublezed2 here it is : https://quickforget.com/s/16bb87b9fe9b9c51235b5b95a6a58ae1a0db0e6fd5c3e12c

To access the shop page where the blurry products are, just add /soutien to my main domain name.

Hey, @su1!

I was not able to access the report as it was already erased. Can you please share it again so we can take a look?

Thank you!

Looking forward to your reply.

Have a wonderful day!

@carlom29 here it is again: https://quickforget.com/s/5aadc27e264a5b28d9591bacb6a9968cac280abb5ffe6a79

Hey, @su1!

Thank you! I was able to see it now.

I checked the page you mentioned on Chrome, and the images were not blurry on my end.

Do you mind going to this site, https://www.whatismybrowser.com/, and sharing your browser information with us?

Have you tried checking the website on Chrome/Edge on another device to see if the issue persists?

Looking forward to your reply.

Have a wonderful day!

@carolm29 my browser is Chrome 122 on Windows 10.

Yes I’ve tried on other devices. Sometimes I get the same problem, sometimes not. But it’s definitely not something specific to my setup, as I’ve just asked a third-party website to take a screenshot of my shop, and the blurry images appear there too! Look here: https://www.site-shot.com/cached_image/MzdkUt8jEe66hAJCrBEAAg

You should see the first product is sharp and the second is blurry (to make it easier to see the problem, I have added the EXACT?same image to the first two products – not even uploaded the same image twice, but used the same file in the media library, but one image is blurry, the other not).

Something else I have noted: when I reload my shop page, the images that appear sharp first appear blurry for like half a second, and then become sharp. Are different versions of the images loaded sequentially? Could some browsers stay “stuck” on the wrong one?

Hi there @su1,

?Look here:?https://www.site-shot.com/cached_image/MzdkUt8jEe66hAJCrBEAAg

I was unable to access the image from the shared link. DO you mind re-sharing it again.

Are different versions of the images loaded sequentially? Could some browsers stay “stuck” on the wrong one?

Could you be using any caching or image optimization plugins? Such behaviors are mostly experienced if one is using an image optimization plugin. If you are not using one, please clarify if you also have any caching plugins in place.

Looking forward to your reply.

@ckadenge it looks like the site I used for the screenshot deletes the screenshot after a while. I’ve uploaded it at the root of my website. Just add /screenshot.png to the root of my website and you’ll see it.

I have no caching or image optimization plugin. I’m using cloudflare but I have cleared its cache many times (and at the moment, that cache is off).

Ok so I’ve been able to narrow down the problem. The problem happens only when I use a custom shop page with the shortcode

[products columns=”3″ paginate=”true” limit=”18″ class=”alignwide text-center”]

If I use the official shop page (just add /shop to my main domain name) I don’t see the blurry image. I wast not using the official shop page because of another bug in which I?could not change the page title (see https://www.ads-software.com/support/topic/cannot-change-shop-page-title/)

Hi @su1,

Thank you for the additional details about the products shortcode. Can you try setting up your custom shop page using the Products block instead of the shortcode? Our WooCommerce blocks are now the easiest and most flexible way to display your products on posts and pages on your WooCommerce site.

Learn more here:

• https://woo.com/document/woocommerce-blocks/#section-5
• https://www.elegantthemes.com/blog/wordpress/woocommerce-blocks

Please let us know if this helps!
-OP

I’m using the shortcode because the blocks are not compatible with one of the plugins I?use (Express shop by Kestrel WP). I’d rather keep using the shortcode and try fixing the blurry image problem.

Hello su1

Thank you for contacting WooCommerce support.

I understand your site shows blurry images for some products on some browsers (Chrome, Edge) but not others (Firefox).

This is a strange problem. For better diagnoses could you please share the link for your Shop page? It would be helpful if you could share screenshots of the blurry images so I can check the exact images on my end.

Could you also send me a copy of your site’s System Status Report?
You can find it via WooCommerce > Status.
Select Get system report and then Copy for support.

Once you’ve done that, you can paste the text in https://gist.github.com
After that, you can paste the Gist link here in your reply.

This report will help me understand site setup.

Looking forward to your response. ??

@doublezed2 I’ve done all of that already with your colleagues. Do you have private support where I could open a ticket and share all that information privately once and for all, and so that all of you guys from the plugin support could access it?