Title: Blurred Images
Last modified: February 15, 2020

---

# Blurred Images

 *  Resolved [majjka](https://wordpress.org/support/users/majjka/)
 * (@majjka)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/blurred-images-3/)
 * Hi,
    I have a problem with displaying images in the WooCommerce Product Block.
   Images (thumbnails) are blurred and I do not know what is wrong, because every
   product image on the shop page is ok, but only in the Product Block is blurry.
   Especially on a smartphone, where the images are stretched. WP: 5.3.2, WC: 3.9.2,
   Theme: Flash Can you help me please? Thank you.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fblurred-images-3%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Support [Jessica G.](https://wordpress.org/support/users/jesscga/)
 * (@jesscga)
 * Automattic Happiness Engineer
 * [6 years, 2 months ago](https://wordpress.org/support/topic/blurred-images-3/#post-12447170)
 * 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](https://woocommerce.com/storefront/) or [Twenty Twenty](https://wordpress.org/themes/twentytwenty/)
   and see if you notice a difference with images created by the Product Blocks?
 *  Thread Starter [majjka](https://wordpress.org/support/users/majjka/)
 * (@majjka)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/blurred-images-3/#post-12447746)
 * 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?
 *  Plugin Support [Jessica G.](https://wordpress.org/support/users/jesscga/)
 * (@jesscga)
 * Automattic Happiness Engineer
 * [6 years, 2 months ago](https://wordpress.org/support/topic/blurred-images-3/#post-12453057)
 * It looks like you’re using the [Flash theme](https://themegrill.com/themes/flash),
   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/](https://themegrill.com/support/)
 * I hope they can help figure that out!
 *  Thread Starter [majjka](https://wordpress.org/support/users/majjka/)
 * (@majjka)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/blurred-images-3/#post-12456013)
 * Ok, Thank you for the information.
 *  [rabh](https://wordpress.org/support/users/rabh/)
 * (@rabh)
 * [6 years ago](https://wordpress.org/support/topic/blurred-images-3/#post-12686255)
 * 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 6 years ago by [rabh](https://wordpress.org/support/users/rabh/).
 *  [ceasr83](https://wordpress.org/support/users/ceasr83/)
 * (@ceasr83)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/blurred-images-3/#post-13137677)
 * 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
 *  [lastafa](https://wordpress.org/support/users/lastafa/)
 * (@lastafa)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/blurred-images-3/#post-13190995)
 * 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

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Blurred Images’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/woo-gutenberg-products-block_71608f.
   svg)
 * [WooCommerce Blocks](https://wordpress.org/plugins/woo-gutenberg-products-block/)
 * [Support Threads](https://wordpress.org/support/plugin/woo-gutenberg-products-block/)
 * [Active Topics](https://wordpress.org/support/plugin/woo-gutenberg-products-block/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woo-gutenberg-products-block/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woo-gutenberg-products-block/reviews/)

## Tags

 * [img](https://wordpress.org/support/topic-tag/img/)
 * [sizes](https://wordpress.org/support/topic-tag/sizes/)
 * [srcset](https://wordpress.org/support/topic-tag/srcset/)

 * 7 replies
 * 5 participants
 * Last reply from: [lastafa](https://wordpress.org/support/users/lastafa/)
 * Last activity: [5 years, 8 months ago](https://wordpress.org/support/topic/blurred-images-3/#post-13190995)
 * Status: resolved