blurry images

  • squeaky

    (@squeaky)


    7 years, 10 months ago

    Hello,
    I am struggling with blurry images.
    I have great photos, but they all look blurry.
    What am I doing wrong?
    Please help….
    I have the featured images (at least the first 12 shown on this page) at 1200px x 1200px

    under the customizer:
    woocommerce | product images set to
    Main Image Width : 600
    Thumbnail: 300
    Thumbnail cropping: 1:1

    I’ve regenerated the images, I’ve cleared my cache. But nothing is fixing the images.
    Please what am I doing wrong?

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Kevin

    (@jx-3p)

    7 years, 10 months ago

    Hello,

    I’m not seeing the images blur. What device/browser are you experiencing this issue on?

    -Kevin

    Thread Starter squeaky

    (@squeaky)

    7 years, 10 months ago

    In chrome, the images look blurry to me on the category pages, do you not see that?
    where the actual images on the details page are clear/crisp

    hannah

    (@hannahritner)

    7 years, 10 months ago

    Hi @squeaky,
    In Theme Options > Shop Settings what are your Product Image Sizes settings?

    Hannah

    Thread Starter squeaky

    (@squeaky)

    7 years, 10 months ago

    Hi Hannah,
    thank you.
    I just found those settings. An odd thing happened I updated the theme and it reset the images to portrait.
    Category Image Aspect Ratio 3:4 – I’ve unset this now.

    Enable Product Image Crop on Catalog pages = OFF
    Enable Product Image Crop on product Page = Off

    I’ve since changed the settings in Appearance| Customizer | Woo settings | Product

    Image Main Image Width: 468
    Thumbnail 270
    Custom cropping 2:3

    Help, thank you!

    Ben Ritner – Kadence WP

    (@britner)

    7 years, 10 months ago

    Hey,
    So I’m noticing that srcset isn’t being set on your images. This allows them to be clear on HD screens like retina.

    The images are large enough but no srcset seems to be added. That is odd since it should be. Can you tell me what version of WordPress and WooCommerce you are using?

    Ben

    Ben Ritner – Kadence WP

    (@britner)

    7 years, 10 months ago

    Well some are being set. Look at your westcoast product down near the bottom. That has srcset and so it’s clear. What about your other products did you do differently when creating them?

    Ben Ritner – Kadence WP

    (@britner)

    7 years, 10 months ago

    ok I see, “Custom cropping 2:3” woocommerce doesn’t create retina files so when you are using Custom cropping 2:3 it’s only creating the image for a standard screen. A size of 270x405px. which for most phones, tablets and the majority of desktop screens they use HD pixel ratio. So it should be twice that size. This is normally set in the srcset.

    I think as a hack fix if you first set the thumbnail width as 540px then create all those images for HD.

    Thread Starter squeaky

    (@squeaky)

    7 years, 10 months ago

    Is it possible to fix without the hack?

    There are all sorts of different sized images in there.
    The featured images are on 1200 x 1200 canvases. But the additional product images are varied sizes.
    They are different photo shoots, I am not sure how to make these images shine.

    And as for the hack, what do you mean create all those images for HD?

    1080px? is that what you mean? At what aspect ratio?

    Thread Starter squeaky

    (@squeaky)

    7 years, 9 months ago

    For your references:
    WordPress Version 4.9.8
    WooCommerce Version 3.4.4

    Thread Starter squeaky

    (@squeaky)

    7 years, 9 months ago

    If needing the srcset is needed for the HD devices, is that part of the issue? and if so, what is setting that? the theme?
    I really appreciate the assistance.
    thank you

    Ben Ritner – Kadence WP

    (@britner)

    7 years, 9 months ago

    Hey by HD I’m talking about high density pixel screens. Common use to be 72 pixels per inch and now a lot of screens are 144 pixels per inch so images that are uploaded at 72 pixels per inch (which is normal) are blury on better screens.

    All you need to do is set your thumbnail width to 540 in your woocommerce settings. Frankly, you can leave it on this setting and that would be perfectly fine. And look great. A “hack” is probably giving you the wrong idea. It’s what you should do. But once you have created all those images (give it some time) you can change back to 270px since those larger images would be created then they would show in the srcset.

    This is all about woocommerce settings to be clear.

    Thread Starter squeaky

    (@squeaky)

    7 years, 9 months ago

    Hello and THANK YOU!

    I have changed the woocommerce | product image | thumbnail setting to 540, and it looks like they are clear now. yoohoo

    Please can you clarify a few things –

    Is it the existence of the larger images that is triggering the srcset to be added to the image link? and this is why you are telling me to give it some time?

    THANK YOU!

    Ben Ritner – Kadence WP

    (@britner)

    7 years, 9 months ago

    Hey,

    Is it the existence of the larger images that is triggering the srcset to be added to the image link

    I’m not sure what you are asking… Once you have woocommerce build the larger images then if you switch back to a setting of 270 a srcset would be set, but it won’t be set unless you switch back. But you don’t need to switch back if you just want to leave the src at 540.

    You need to give woocommerce time to create all the larger images because it doesn’t happen the moment you change the setting.

    Ben

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

The topic ‘blurry images’ is closed to new replies.