Return to previous page

Blurry Product Pics - by fpercussion - on WordPress WooCommerce support

This topic has 9 replies, 4 voices, and was last updated 7 years, 6 months ago ago by Olga Barlow

fpercussion

Participant

May 9, 2017 at 15:42

I have tried changing the product display images size in the WooCommerce settings. I’ve tried uploading various image sizes…I’ve regenerated thumbnails and I’m still getting blurry images for the product pages.

Please if you could help, I would be really grateful!

#162626 Copied Theme version: 3.11.1 WooCommerce version: 3.0.5

8 Answers

fpercussion

Participant

May 10, 2017 at 13:01

This issue is holding up a fair amount on my site, please if you could help! If I need to provide you with any information please let me know!

#162698 Copied

Rose Tyler

Support staff

May 11, 2017 at 07:02

Hello,

Sorry for the delay.
You need use all the images with the same dimensions or enable hard crop option in WooCommerce settings http://prntscr.com/e9i66w More information about image settings you can find here https://docs.woocommerce.com/document/fixing-blurry-product-images/
Also, Keep in mind if you change the sizes in WooCommerce settings you will need to regenerate thumbnails using Regenerate thumbnails plugin after that.

Regards

#162752 Copied

fpercussion

Participant

May 11, 2017 at 17:19

Thank you for your response. I have tried resizing my pictures, enabled hard crop and regenerated my thumbnails. The pictures are a little less blurry, but they are still not that crisp looking.

What else can I try?

#162884 Copied
Olga Barlow

Support staff

May 11, 2017 at 17:46
Hello,

You may try also add the following code in Theme Options > Styling Custom CSS it will help you if some images are smaller than image block.
```
.content-product .product-content-image img {
    min-width: 1px;
    width: auto;
}
```
But you need to be sure that your original images are not blurred, because if source image is blurred
http://dev.freerpercussion.com/wp-content/uploads/2017/01/fca.jpg
then catalog image will be also blurred http://dev.freerpercussion.com/wp-content/uploads/2017/01/fca-555×513.jpg
WP generates different sizes for the images, for example http://dev.freerpercussion.com/wp-content/uploads/2017/01/CH3-555×219.jpg and our theme does not affect it. You may check even with WP default theme.

Regards
#162886 Copied
fpercussion

Participant

May 30, 2017 at 16:03

Ok, great. Thank you!

#164569 Copied

Olga Barlow

Support staff

May 31, 2017 at 17:17

You are welcome!

Regards

#164701 Copied

Yuri Werneck

Participant

July 5, 2017 at 23:51

Hi there 8 Theme! It is a pretty nice theme, no doubts. I have only one difficulty regarding the images. I’m customyzing the theme and I’ve uploaded several product images in two different moments (with the same size and resolution). At the midia library, all the images are correct.

However, the last batches are becoming blurred at Home and Product’s page. When I click over the quick view, the image apears accordingly. When I turn back to the first page, it shows a blurry image. After this, If I refresh the page (CTRL F5) the image shows up accordingly with no blurs.

Any help is welcome!

Please, contact administrator
for this information.

#167176 Copied Theme version: 3.9 WooCommerce version: 2.6.14
Olga Barlow

Support staff

July 6, 2017 at 14:39
Hello, @Yuri Werneck,

1) Go to WooCommerce > Settings > Products > Display > Image Size and set correct image size for the catalog images. This post will help you to find out what size is ok for you https://docs.woocommerce.com/document/fixing-blurry-product-images/

2) After that install and activate Regenerate Thumbnails plugin and regenerate all the thumbnails (Tools > Regenerate thumbnails > All)

3) Add the following code in Theme Options > Styling > Custom CSS
```
@media only screen and (min-width: 1200px){
.content-product .product-content-image img {
    min-width: 1px;
    width: auto;
}}
```
Regards
#167238 Copied
Viewing 9 results - 1 through 9 (of 9 total)