[Resolved] Blurry WooCommerce Product Image

Home Forums Support Blurry WooCommerce Product Image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1473675
    Oisin

    Hi Folks,

    I’m a bit lost and in need of some advice. My product image looks like crap and I’m not sure why. Can you take a look and see what needs to be done?

    Many thanks,

    Oisín.

    #1473688
    Leo
    Staff
    Customer Support

    Hi there,

    I don’t think this is a theme related issue.

    Looks like the original image isn’t very clear either.

    If you upload a high-resolution stock image (from https://unsplash.com/ or something). Does it show up ok?

    #1474265
    Oisin

    Hi Leo,

    I originally tried to match the image dimensions to the product image container. This new image is larger and higher quality yet it still looks blurry?

    I assume it’s something got to do with the resizing but I could be wrong. Any help much appreciated. I need it looking as sharp as possible.

    Many thanks,

    Oisín.

    #1474376
    David
    Staff
    Customer Support

    Hi there,

    it looks pretty sharp to me.
    However, this issue arises when images are being rescaled.
    Lets break that down on your site:

    Your Original Full Image is 900px wide.
    Woocommerce single product size is set to 550px.
    GP Woocommerce > Product Image Area Width is set to 40% which is 40% of 1100px ( Primary Content ) = 440px.

    I would do this:

    Original size: 1000px.
    Woocommerce single product size: 500px
    GP Product Image Area Width: 45% = considering woo margins this will equal 500px.

    So your original image will be exactly halved ( which is less lossy then an odd percentage ) in size, and will be displayed at that exact size.

    The other thing to note is that WP compresses images on upload which can be disabled with this PHP Snippet:

    add_filter('jpeg_quality', function($arg){return 100;});

    Note existing images will need the Regenerate Thumbnails plugin to update them.

    #1474378
    Oisin

    Thanks David,

    Excellent advice as always! The image looks sharp when a user hovers over for full view, it’s the scaled down version that looks pretty bad.

    I’ll do exactly as you say and see how it looks.

    Cheers,

    Oisín.

    #1474491
    David
    Staff
    Customer Support

    Let us know how you get on 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.