Return to previous page

Blurry product image - by sophie - on WordPress WooCommerce support

This topic has 22 replies, 6 voices, and was last updated 7 years, 9 months ago ago by Rose Tyler

sophie

Participant

February 24, 2017 at 06:55

Hi,

I’ve noticed my product images are blurry on my single product page if I don’t zoom in with resting my cursor on the image. It’s very noticeable when I zoom out to the max then compare the product image with the zoom (with cursor on the image) and without the zoom. Please have a look at the following two images, one (the blurry one) is without zooming the image (the default image my customers see when they land on my single product page) and the other one zoomed out and with cursor on the image.

https://www.dropbox.com/s/tqvzqlvitakqqls/Screenshot%202017-02-24%2013.47.08.png?dl=0
https://www.dropbox.com/s/rga761jry13psd6/Screenshot%202017-02-24%2013.47.28.png?dl=0

I’ve set all my product image aspect ratio to be 570 x 648px.

Please let me know what I can do to fix this. I’ve included my account login details in the private content below.

Many thanks!

Please, contact administrator
for this information.

#155650 Copied

21 Answers

Nico313

Participant

February 24, 2017 at 10:17

Hello,

Same Issue. Product Images very blurry.

Please Help.

Regards.

Please, contact administrator
for this information.

#155657 Copied Theme version: 3.1 WooCommerce version: 2.6.14

Nico313

Participant

February 24, 2017 at 10:30

The problem is in the size of image that is in 300×300 with css width 100%. The
forced enlargement make the picture blurry.

So we need to display the original image.

How fix this ?

Thank you

#155659 Copied

BrownLeopard

Participant

February 24, 2017 at 10:52

I have the same problem! We are not able to correct it. Seems it is a new version BUG.

#155665 Copied Theme version: 3.1 WooCommerce version: 2.6.14

Nico313

Participant

February 24, 2017 at 11:02

Solution :
add the following code in your functions.php file in legenda folder :

/**
* DEBUG BLURRY IMAGE in single product page
*/
function custom_product_large_thumbnail_size() {
return ‘shop_large’;
}
add_filter(‘single_product_large_thumbnail_size’, ‘custom_product_large_thumbnail_size’);

#155667 Copied

BrownLeopard

Participant

February 24, 2017 at 12:04

Unfortunately it didn’t help. It helped to you??? Nico313

#155683 Copied

Eva Kemp

Support staff

February 24, 2017 at 13:13

Hello @BrownLeopard,

Try to change images sizes in Woocommerce > Settings > Products > Display and then regenerate thumbnails with the plugin https://wordpress.org/plugins/regenerate-thumbnails/ .

Regards,
Eva Kemp.

#155696 Copied

Nico313

Participant

February 24, 2017 at 13:51

Yes BrownLeopard, it works fine for me.`/**
* DEBUG BLURRY IMAGE in single product page
*/
function custom_product_large_thumbnail_size() {
return ‘shop_large’;
}
add_filter(‘single_product_large_thumbnail_size’, ‘custom_product_large_thumbnail_size’);`

P.S little mistake on quotes : ‘ => ‘

#155708 Copied

sophie

Participant

February 27, 2017 at 08:06

“Try to change images sizes in Woocommerce > Settings > Products > Display”

What do we change the image size to? Also should I add the code Nico313 suggested?

Thanks,
Sophie

#155806 Copied

Eva Kemp

Support staff

February 27, 2017 at 09:34

Hello @sophie,

Please try to set these sizes:
http://storage7.static.itmages.com/i/17/0227/h_1488184444_3859954_947ba9b8c6.jpeg
and regenerate thumbnails with the plugin https://wordpress.org/plugins/regenerate-thumbnails/ .

Regards,
Eva Kemp.

#155816 Copied

sophie

Participant

March 1, 2017 at 08:40

Hi Eva,

Thanks for getting back. I was just wondering before we upload our product images, what is the optimal size I should crop the images before uploading for the best results?

Thanks,
Sophie

#155967 Copied

Jack Richardson

Support staff

March 1, 2017 at 14:12

Hello,

We’re using product images with dimensions 2160 × 2349 pixels on our demo site, so you can use something similar.

Regards,
Jack Richardson.

#155999 Copied

sophie

Participant

March 2, 2017 at 04:21

Hi,

I’ve changed the image sizes to the ones in the screen capture and regenerated all my images but the product photos on single product page are still blurry without zoom. Please let me know how I can resolve this issue.

Thanks.

#156032 Copied

Rose Tyler

Support staff

March 2, 2017 at 14:40

Hello,

Seems it works fine now http://prntscr.com/ef3oju. Is this problem solved?

Regards,
Rose Tyler.

#156092 Copied

sophie

Participant

March 3, 2017 at 04:51

Hi,

No the problem has not been resolved, that image you captured still looks very blurry to me..

#156160 Copied

Rose Tyler

Support staff

March 3, 2017 at 09:45

Hello,

In this case, read this topic, please:
https://www.8theme.com/topic/product-single-images-blurry-after-latest-update/

Regards,
Rose Tyler.

#156168 Copied

sophie

Participant

March 6, 2017 at 09:42

Hi Rose,

I’ve read the other thread and did what it said but the problem is still not resolved. Could you please just go to my website and do the following step so you know what I mean? I think I’ve had this problem since the beginning, not just after the latest update. Please refer to the private content below for my website link.

Steps:
1. Go to the link below
2. hover your mouse cursor on the product image
3. zoom out as much as possible (so the handbag in the zoomed image is the same size as in the not-zoomed image – now you should see a very crisp and clear photo of the product)
4. Move the mouse cursor away from the image so you can see the not-zoomed image

if you hover and remove your cursor from the product image once or twice you should be able to see very clearly my product images (when not-zoomed) are very blurry.

Please help me resolve the issue.

Thanks!

Please, contact administrator
for this information.

#156276 Copied

Rose Tyler

Support staff

March 6, 2017 at 16:35

Hello,

I’ve changed Single Product Image size http://prntscr.com/egpuuo, you need to regenerate thumbnails.
Also, it isn’t the bug, you can see the same on our demo template.

Regards,
Rose Tyler.

#156332 Copied

sophie

Participant

March 7, 2017 at 08:01

Hi Rose,

Thanks for getting back. For some reason I can’t regenerate my images anymore and have been getting error messages like the one below when I try to regenerate any images.

“_Img167876” (ID 9911) failed to resize. The error message was: The originally uploaded image file cannot be found at 2017/02/Img167876.jpg

and my photos on my websites are not displaying anymore.

Please let me know what the problem may be.

Thanks!

#156380 Copied

Rose Tyler

Support staff

March 7, 2017 at 11:02

Hello,

Please update your parent theme.
Before update delete “woocommerce” folder in the directory wp-content/themes/legenda/ and it’ll be reuploaded from a new theme package.
Don’t forget to create back up of your files and database before starting update process!
Here you can check video tutorial:
https://youtu.be/KdWESIIPU1k
Also, provide FTP credentials in Private Content

Regards,
Rose Tyler.

#156400 Copied

sophie

Participant

March 7, 2017 at 12:36

Hi Rose,

Would updating the theme help solve the image blurry problem? Please find in the private content my FTP credentials.

Thanks!

Please, contact administrator
for this information.

#156412 Copied

Rose Tyler

Support staff

March 7, 2017 at 16:02

Hello,

The problem was caused by “Screets Live Chat” plugin.
I’ve deactivated it.
Now your images are working. Please clear browser cache and check.

Regards,
Rose Tyler.

#156424 Copied
Tagged: best, blurry, image, optimization, persuasive, product, selling, themes, woocommerce
Viewing 22 results - 1 through 22 (of 22 total)