[Resolved] Blurry WooCommerce Product Image

[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.

[Leo]

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?

[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.

[David]

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.

[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.

[David]

Let us know how you get on 🙂

[Author]

Posts