Blurry WooCommerce Product Image

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?

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.

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.

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.

Let us know how you get on :)