Support » Theme: Storefront » Problem with blurry catalog images

  • Resolved boppar

    (@boppar)


    I have an issue with blurry images.
    On the link attached there is a catalog page with 6 products. The images looks blurry. They are uploaded to admin in high resolution.

    In admin/appearance/customize/woocommerce/product images I’ve set uncropped.

    In admin/settings/media
    Thumbnail size 150×150
    Medium size 300×300
    Large size 1024×1024

    When I inspect an image in inspector it shows the size 324×216.

    What can I do to solve the problem with these blurry images?

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

Viewing 5 replies - 16 through 20 (of 20 total)
  • Thread Starter boppar

    (@boppar)

    @dcka @danielinhou

    Maybe I got an idea to what causes my problem.
    All my product images are 1200×800. They are set to show uncropped.
    On this category page the images looks OK, not blurry:
    https://hangmattor.se/produkt-kategori/hangmattor/

    The problem with blurry images is on this category page:
    https://hangmattor.se/produkt-kategori/hangstolar/

    My guess is that the problem is that large detailed images becomes blurry when reducing their size. The result is still OK on the hangmattor category. The problem with the hangstolar category is that there seems that the details gets lost in blurriness. The hangstolar should be better displayed in a standing picture, instead of a lying picture.

    Do you have any suggestions?

    Hi, @boppar!

    I’ve been thinking about your issue and I’m honestly running out of ideas. I did check the hangmattor and hangstolar category pages again, and I’m noticing significant differences in the file sizes of the images themselves. I’m not sure if that is a factor, however.

    So for the hangstolar page, I’m seeing the following sizes in kB:

    • 4.9, 8.4, 5.3
    • 6.7, 6.8, 5.9

    And for the hangmattor page, I’m seeing the following (I only checked the first three rows here):

    • 20.0, 13.9, 13.9
    • 15.5, 11.2, 21.0
    • 20.1, 21.1, 14.8

    Do you know if there may be a difference in the way the raw images (images from, for example, your image editor) were generated?

    Thread Starter boppar

    (@boppar)

    @dcka

    Hi Cara.
    That’s weird. The product images in hängmattor and hängstolar are uploaded in the same size (1200×800) and are all between 90-150 kb.
    As you wrote the catalog images of hangmattor are between 14-20 kb, but the catalog images of hangstolar are 7-9 kb.
    I’ve done nothing different with the hangstolar images. Why on earth are they displayed in a smaller size on hangstolar page?

    Thread Starter boppar

    (@boppar)

    @dcka

    Now I use a different image size for the hangstolar page, 800×1200 instead of 1200×800. As there was no working solution for the blurry images I guess I’ll have to accept these hangstolar images.

    Hey @boppar,

    I just checked the hangstolar page again, and those images are at file sizes that are comparable to the hangmattor images now:

    • 15.1, 20.6, 16.1
    • 18.9, 21.7, 19.6

    They look much better now too, at least to my eye.

    I’m still not sure what was going on with the previous images, but I’ll continue to keep this thread open for a bit in case anyone else has suggestions.

Viewing 5 replies - 16 through 20 (of 20 total)
  • You must be logged in to reply to this topic.