CODEWITHSUNDEEP
htmlwordpressimagewoocommerceblurry
Shan Ki
Shan Ki

Reputation: 33

Woocommerce blurry product image

http://doubleknityarn.com.hk/

This is my web home page. Everything goes fine, except the 4 product images in the middle of the website are too blurry.

I have already done the "Regenerate Thumbnail" plugin, resize the image size in the setting of display under woocommerce products, but still I cannot obtain clearer photos.

Any one can help? I have tried many methods already.

Upvotes: 1

Views: 419

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253784

If I display the url of one of this images, I got:

…/wp-content/uploads/2016/04/DSC09923.jpg?resize=116%2C145

At the end after /DSC09923.jpg you have ?resize=116%2C145 which mean resizing in 116px x 145px, because this small defined images are displayed in a zoomed version, I mean like 250% larger. so they get blurred. See the html generated code:

<img width="116" height="145" src="http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=350%2C435" 
class="lazyOwl wp-post-image" 
alt="AERO Needles" 
data-src="http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=350%2C435" 
srcset="http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=350%2C435 350w, 
http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=570%2C708 570w, 
http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=116%2C145 116w, 
http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=190%2C236 190w" 
sizes="(max-width: 116px) 100vw, 116px" style="opacity: 1;">

I don't know how you display that 4 images in the home page, so it's difficult for me to find out the real problem. You will need to specify sizes for that images: 'medium' or 'large'…

You may need in wooCommerce > settings > Products > Display to re-configure sizes and hard-cropping options…

Upvotes: 1

Related Questions