blurry product images on Kickstart theme

hello,

i am still desperately needing help with this issue.

WooCommerce is great but this issue is making my client very concerned. how often do moderators check these support threads?

please help!

The images look good to me but I understand that’s subjective. They are 420px square but showing in a space 209px square, so they are being compressed a bit. But if you set the catalog image size to the size they were being displayed at, I don’t think that would help with clarity, though it may make the page load a bit quicker. Was the original picture size 420px or better? Its when pictures are expanded that they can look blurry.

What may be an improvement to consider is if you didn’t have a sidebar. The images would then display at 302px square. With more picture showing and less compression they look a better in my view. Of course the search and the products menu would have to go somewhere else.

Alternatively you may also want to consider having two products per row instead of three to enable the pictures to be bigger.

Generally the moderators here will ensure the forum guidelines are being followed but they don’t have the resource to answer all questions by a long way. That’s left up to anyone who wants to chip in. I understand Woo Themes have a paid support service.

hello lorro,

thank you for your response. the images sizes are set for retina screens and they do look pretty good there.

your idea is an interesting one and i quickly removed the sidebar to see if it made a difference but still the images are blurry. and really don’t want to change the design as this late date. and yes it might be subjective but the client wants sharp images–can’t blame them as they have spent a good deal of time and money producing the photography.

it seems something is overriding the woocommerce product display sizes. when i reduce or increase the browser page size i see the sharp images for a moment and then all goes blurry again. i can not imagine what is highjacking the image sizes i set in the woocommerce settings.

any other thoughts? this seems to be a common issue but haven’t found anyone with the answer. i am going to start turning off plugins to see if that’s where the issue lies.

thanks again for any additional thoughts.

I don’t have a retina display so can only comment on desktop appearance.

When the image gets to the browser, the browser will resize the image depending on the space made available by the page styles as set by the theme, and on your page the layout gives a space 209px square, so that’s the size the images will be, irrespective of the product size settings.

The WooCommerce product display size settings set the size of the image that is sent to the browser. If that’s too big, too much information is sent and page loading slows down, if its too small the images can be blurry if the images have to be expanded to fit the space on the page, but the latter doesn’t apply here.

The jumping in image sharpness you see may be at @media-query boundaries which are setting different styles, and therefore different image space, at differing screen resolutions.

I can sympathise with not wanting to alter the design but maybe the page width could be increased slightly and the sidebar width decreased slightly to make a bit more space available for the product images. They can’t be really sharp if they are small.

hello Lorro,

again thank you for your thoughts. i have already tried expanding the width of the page by removing the sidebar and still the images are blurry.

can i ask why you said the images can’t be really sharp if they are small? that doesn’t make sense to me???

still looking for a solution!

I agree with Lorro. If the original size of the images are small, chances are they’ll get pixeliated when expanded (or stretched) to fit the space.

These are my thoughts, you can use two sizes of high quality images (small and bigger versions). Use the smaller one on the catalog page (thumbnail) and the bigger one for the specific product page. I hope I make sense.

PS.
Are the original images sharp? or Have you tried editing/enhancing the images?

hello Cleverlocal,

thank you for your response. the size of the original images is 700 pixels square–they are not small. and the originals are sharp. if you click on the catalog images you see a sharp image. it is only the thumbnails that are blurry so the issue is with the rendering by the WooCommerce plugin. i am in touch with WooThemes so hopefully they will be able to help me.

i will leave this thread open in case someone else with the same issue found a solution. but i will post my solution in a new thread once i am successful.