Image compression too agressive on thumbnails and product images

Resolved Youssouf
(@youssouf19)

1 year, 11 months ago

Hello,

The images on all the product pages of my websites are too blurry and pixelated.

I’ve noticed that if I click on the attribute or if i click in the images in the product page the quality may change depending the choice.

As you can see in this video, the image is way to much pixelated, we can’t even read the brand of the product. When I click on the same image below the quality increase a little bit but it’s still very low.

In this second video, we can see how the image become clear and nice when i deactivate the optimization done by Imagify, we can read the brand of the product etc.

This problem only happens with product pages. Can you help me with this ?

Thank you.

The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 17 total)

1 2 →

Plugin Author WP Media
(@wp_media)

1 year, 11 months ago

Hi @youssouf19

This is Ioanna from Imagify and I’ll gladly assist you here!

Thank you for sharing the video.

Testing from our end through the Imagify App using the Smart Compression on your original product images in question, I am not able to see the quality loss. Can you please check the images below?

Original image: https://kuulaa-tech.com/wp-content/uploads/backup/2020/12/Batterie-externe-40000mAh-Y-noir.jpg
Optimized with Smart compression: https://paste.pics/c178bd2f0dd3d92066ad3f3486c6ce70(unfortunately I cannot share the image file here)

Original image: https://kuulaa-tech.com/wp-content/uploads/backup/2020/12/Batterie-externe-40000mAh-Y-blanc-1.jpg
Optimized with Smart compression: https://paste.pics/e199b8a1efd194f8b78f2b798fa6d4e7

Please let me know if there is something that I am missing.

Did you try to display the WebP version of your images should be even better although according to the above testings the difference is not visible.

Best Regards,
Ioanna

Thread Starter Youssouf
(@youssouf19)

1 year, 11 months ago

Hello,

Yes as I saw the original image optimized is looking good. But when it comes to be displayed on the product pages it don’t show as good as they should, we can see in the video that they are very blurry and look like 100x100px images.

(With Imagify : https://ibb.co/HPKg1rN

Without Imagify : https://ibb.co/tXvrFDm

The first is one is very blurry, we are not even able to read the brand and looks awful, the second one is normal)

I don’t know where the problem comes from, but the optimization is not the problem i think it’s a technical problem, because as you said when you display it on your screenshot the optimized version looks normal.

It is decreasing my conversion rate, and it is a big problem, I’ve been looking for a solution since a long time but I am lost and I don’t find one.

Thank you.

Plugin Author WP Media
(@wp_media)

1 year, 11 months ago

Hi @youssouf19

Thanks for your patience!

Based on this info, the only thing that could be causing the problem is WebP display. Can you try to disable WebP display option but keep the image optimized, clear all caches and check again?

It would be ideal if we could see the problem in action if things are not solved with this step, so let me know if we could arrange some time not to keep it look bad for a long time?

Best Regards
Marko

Thread Starter Youssouf
(@youssouf19)

1 year, 11 months ago

Hi @wp_media,

Thank you for your feedback, unfortunately this is still not working :

https://gyazo.com/c660efecd88f552f05a602940d100164

https://gyazo.com/2dd665e81fbede21d24c6a084e38a82d

Thank you, best regards.

Thread Starter Youssouf
(@youssouf19)

1 year, 11 months ago

This is after deactivating webp and clear cache :

https://gyazo.com/0c7d78d89ca5d5179e05fdeb0c9d789b

Plugin Author WP Media
(@wp_media)

1 year, 11 months ago

Hey,

Sorry to hear about that.

What confuses me the most is that I can not see the difference between original and optimized image (as same as my colleague previously). I went to your site and checking that external battery page and checking the source code – the optimized image is delivered and it’s not resized with HTML (which can cause the quality loss.

What I can do is to keep the page opened in my browser, and wait for you to restore it to original again (we are talking about this image), so I could open the page in another tab and compare.

Would that be ok for you?

Best Regards
Marko

Thread Starter Youssouf
(@youssouf19)

1 year, 11 months ago

Hi Marko @wp_media,

Thank you for your efforts, I just restored it to original again as you asked me.

Tell me if you need something else to the fixing of this bug.

Best regards.

Plugin Author WP Media
(@wp_media)

1 year, 11 months ago

Hey Youssouf,

Thanks!

I am checking but it seems like it’s still not restored on my end as I can still see the backup image here and there is no difference. You can check this video – it’s quite steady although I move through tabs. Even when I zoom images, I can’t see the difference.

Can you check?

Thanks!
Marko

Thread Starter Youssouf
(@youssouf19)

1 year, 11 months ago

Hey Marko @wp_media,

Yes really sorry it’s my bad ! I’ve done it wrong. It should be good now, don’t hesitate to tell me if you need something else.

Thank you very much.

Best regards.

Plugin Author WP Media
(@wp_media)

1 year, 11 months ago

Hey Youssouf,

No worries, thanks!

Please check this video, the image still looks just fine on my end (not only the main one, but all other thumbs).

This makes things a bit difficult to debug, unfortunately. If things are still bad on your end, please try again to restore images to original, that would be the only solution. But it is a bit strange it looks so bad on your end and it’s just fine on mine.

Best Regards
Marko

Plugin Author WP Media
(@wp_media)

1 year, 11 months ago

Hi Youssouf,

I’m following up to see if I left any of your questions about Imagify unanswered?
If all is well, there’s no need to reply, and I will just close our conversation.

However, if you have any further questions about Imagify, feel free to let me know, I’ll gladly continue to assist you.

Best Regards
Marko

Thread Starter Youssouf
(@youssouf19)

1 year, 11 months ago

Hello, sorry for the delay i was very busy recently, i don’t understand why all the discussion has been deleted ?

And i don’t know what to say to the fact you don’t see the problem with your device. Maybe the bug don’t appear on your resolution screen, or with Safari or with a Macbook or whatever.

But on my end there is still a problem. I checked with an other computer and the bug is still there :

https://ibb.co/DKdLnVq

Thank you, best regards.

Thread Starter Youssouf
(@youssouf19)

1 year, 11 months ago

Ok the discussion was not deleted i was just using the link they gave me by mail which is not working and don’t show the discussion :

https://wordpress.org/support/topic/image-compression-too-agressive-on-thumbnails-and-product-images/page/2/?view=all#post-16056998

Plugin Author WP Media
(@wp_media)

1 year, 11 months ago

Hey Youssouf,

I understand what you mean, although still can’t see the difference, unfortunately.

One more thing as you mention it only happens on product pages – does it happen if you add one of these images (for testing purposes) in blog post or sample page?

Also, can you check if it will improve if you compress image using lossless compression level from the Media Library page?

Thanks!
Marko

Thread Starter Youssouf
(@youssouf19)

1 year, 11 months ago

Hello,

For an other page like this one it looks ok :

https://kuulaa-tech.com/blogs/les-meilleures-batteries-externes-comparatif/

And for the lossless verion it’s still very bad and the gain is only 15%.

Also, I’ve discovered a new information that may help you resolve this issue :

The quality is really bad but becomes normal when the windows is getting minimized and then enlarged back. There is a video showing exactling what i am trying to say :

Best regards.

Viewing 15 replies - 1 through 15 (of 17 total)

1 2 →

The topic ‘Image compression too agressive on thumbnails and product images’ is closed to new replies.