Product images are blurry

  • Resolved agemstudio

    (@agemstudio)


    11 years, 2 months ago

    Hi
    I am using the Custom Community theme version 1.17.3 for my blog and am now building up my online shop using WooCommerce. The site is not live yet, I am preparing everything on my iMac as local host while my hosting is getting prepared.

    The products images and thumbnails are very blurry while any other image on the blog side are crisp and sharp. All images I have upload are larger than the sizes in the WooCommerce catalog options.

    I tried changing that setting and regenerate thumbnails with no improvement.
    I also tried using WP Resized Image Quality with again no improvement.

    On other threads I saw something to do with CSS setting but have no idea what that is and don’t want to wreck the whole thing…

    Any help would be really appreciated!

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

  • Could you possibly provide a link to your site? It’s possible there could be a CSS workaround for your problem.

    Thread Starter agemstudio

    (@agemstudio)

    Hi Siobhan
    sorry it took a while to get my new site up and running.

    I have most of my product images showing OK now BUT no matter what I do the related products that show underneath a product details are awful.

    Any idea how to correct that?

    Here is the link to my website
    https://www.gem.net.au

    Thread Starter agemstudio

    (@agemstudio)

    I forgot to mention that pretty much all my product images are 600×600.

    The images under “Related Products” seem to be 210×210 in their natural state. They’re being stretched via CSS which is causing them to look a bit blurry. You could override this using the following CSS snippet:

    .woocommerce .related ul.products li.product,  .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product {
width: auto;
}

    This snippet should be inserted in the theme’s inbuilt CSS editor that you can get to by going to Appearance->Theme Settings->CSS. Hope that helps, let me know.

    Thread Starter agemstudio

    (@agemstudio)

    Thank you so much Siobhan it worked perfectly! Now all my images are smaller and finally clear!

    You’re welcome, glad it worked. ??

    Thread Starter agemstudio

    (@agemstudio)

    I though it was all fixed when I checked a couple of my products after adding the CSS snippet. I have added more products in my shop and I just noticed I am getting different sizes for the related products…
    Some are a little blurry but not as much as it was in the first place.
    Any idea?

    Hey. Try changing width: auto from my original snippet to width: 210px:

    .woocommerce .related ul.products li.product,  .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product {
width: 210px;
}

    This should ensure that all the related images are now the same width. Matching the width of the container to the width of the images (210px in this case) may keep the blurry effect to a minimum. Let me know.

    This theme automatically scales uploaded images to a certain size (450px by 450px for the main product image on a page, and 210px by 210px for the related product images.) This is what causes the loss in image quality. It’s worth bearing in mind, when uploading images, to try and keep them to a size that won’t result in a loss of quality when scaled.

    Thread Starter agemstudio

    (@agemstudio)

    That fixed it!
    Thanks again for your help ??

    You’re welcome. ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Product images are blurry’ is closed to new replies.