Product image quality varying through browsers

Hi!

I just noticed that, for certain products, when they are displayed wether in carousel or in regular product categories search, the image quality seems to differ when I switch the browser.

While the image is good in Safari, for example, when the same page are opened in Chrome the images are displayed borrowed,as in lower resolution. You can see this opening https://www.hauseafins.com.br/categoria/sala/sala-sofas/ in these two browsers. Screenshots are provided, too.

When I open the product page, the images are pretty good in Safari and Chrome.

What can I do to prevent this? It’s the size of the image? It’s a JS thing?

Screenshots reattached.

Attachments:

You must be logged in to view attached files.

Hello,

Could you please check how it works with some default WordPress theme like twentysixteen to understand is it our theme issue or not?

Regards

I’ve tested with Storefront without any issues.

It seems to be the way Woodmart renders the products to show in grid. I already disabled the “Disable – Enable hover image for products on the shop page.” setting but the same thing happen.

But our theme doesn’t influence products images at all. They are displayed by standard WooCommerce functions and can’t depend on the theme. Could you please send comparison images from Storefront?

Hi, sorry for the long delay in replying…

I think I’ve found the situation. When the products are displayed in a carousel, inside the PICTURE element, above the IMG element comes two SOURCE elements, as seen in the screenshot. When I inspect the document, and remove this SOURCE element, the blur in the image disappears. I recorded a screen capture of what happens. Link below.

This happens in theme level or is the plugin used to generate the carousel? Can I disable it?

Our theme doesn’t add these source tags. Could you please check how it works with other themes? If it happens only with WoodMart, please, disable all external plugins and send us your admin access.

Thank you again. I identified that Shortpixel plugin was adding PICTURE and SOURCE elements in order to “optimize” images in some browsers. I disabled that feature and everything looks fine now!

I’m very happy with the theme and, I have to say, you have a very efficient support!

Great, we are glad that you sorted it out.

[Author]

Posts