Blurred Images

Hey there!

The first thing we’ll want to do is see if your theme is having an effect on how the images are being pulled in. Can you temporarily change your theme to Storefront or Twenty Twenty and see if you notice a difference with images created by the Product Blocks?

Hi,

I changed theme to twenty twenty and there was a difference. Product images created by the Product Blocks in twenty twenty had better quality than product images in theme I use now. So it seems to be related to that. Could you advise me how to edit it please?

It looks like you’re using the Flash theme, correct? Your best bet would be to contact the theme developer since they’d be able to provide expert-level support and explain why the product block images are rendering the way they do.

Here’s their contact info:

https://themegrill.com/support/

I hope they can help figure that out!

Ok, Thank you for the information.

I am having this same problem. I have tried about 25 different themes, disabled all kinds of plugins.

I migrated my live site to a development site including directly copying all of the images. On the product category pages the images are always blurry. Then I click on the product and on the product page it is not blurry. Then I go back to the product category page and the image for that product is no longer blurry, but the rest are.

The ONLY theme that displays the images non-blurry, is the original theme from the live site, Storefront. Every other theme I have tried to use produces blurry product category images.

With WC prior to v4 there was a place under settings to define image sizes. This has gone away in v4 so I can’t do anything there.

Yes, I have tried regenerating images multiple times. The blurry looks like it’s high compression levels…

• This reply was modified 4 years, 7 months ago by rabh.

Hello ,
? realy dont know how to solve my problem.
? would like to fix the blury images. Please check from my site hityourstamp.com
What should i do step by step ? My original images are 450×500 Px
Thank you

Hi guys,

From me poking around in the frontend code, this is not a theme issue, it stems back to an incomplete implementation of the img sizes attribute in woocommerce blocks.

The extent that we experience this depends on what the thumbnail size is set as in our theme relative to the size we try to display the product block. That’s probably the reason it was so quickly classified as a theme issue.

In my case, the thumbs are defined as being 397px wide, but I am putting the featured product block (with just one product) in a two column layout, so it displays at 609px in the browser.

The srcset attribute on the image is properly defined, and in my case, actually includes a 610w version of the image!

But when we take a look at the sizes attribute in the rendered block, it looks like this:

sizes=”(max-width: 397px) 100vw, 397px”

This seriously cripples the srcset functionality and displays the thumbnail file no matter the size of the container, thereby producing a blurry image in many use cases.

I have not delved into the plugin code to find this, but it is easy to remedy by changing the attribute to:

(max-width: 397px) 100vw, (min-width: 397px) 610px
or even just
(max-width: 397px) 100vw, (min-width: 397px) 610px

Or you could do a full fledged, proper sizes implementation.

programatically, 397px is the value returned for thumbnail and 610px for full image (as set for single product display in theme).

Let me know if I need to post this a new ticket to have it remedied in a future release. I see this project has a pretty rapid dev cycle, so I am hopeful that something as easily improved, but with huge implications for users, will get a high priority.

Also let me know if I can help in any way.

LJ