[Pablo]

Hi,

I have noticed an issue with images on the product catalogue page. They appear to be slightly blurry when viewed with the Chrome Browser. I am using Chrome Version 83.0.4103.116 on Windows 10.

Under the Development Tools -> Application -> Frames -> Images I can see that the 300×300 px version of the images have been listed but they are slightly blurry which is not the case with Firefox.

If I click on one product to go to the single product page then click the back button to return to the product catalogue page then the thumbnail is a sharp image but only for the image just viewed. Look at the images in the Chrome Developer Tools and it can be seen that the full size image is now listed.

If you use the Ctrl and ‘+’ to zoom in you will eventually get a sharp thumbnail (for me that happens at 125%) and you can see under Dev Tools that the 600x600px image is now listed for all of the products and even when zooming back to 100% all of the thumbnails are sharp. The Chrome browser then continues to use the 600px image for the 300px thumbnail…

I don’t believe this is a Theme related issue because it has been mentioned in several places online (https://superuser.com/questions/530317/how-to-prevent-chrome-from-blurring-small-images-when-zoomed-in) but I have tried using the following CSS under the Customise -> Additonal CSS unsuccessfully:
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
and
image-rendering: pixelated;

Could you help suggest the CSS to use and where to use the CSS or is there something I could do in the Child Theme files to prevent this problem?

Kind regards,

[Althemist]

Hello zuyo,

I am afraid there is not much to be done here. You can try the following code, but Chrome still may ignore the rules. Currently no one knows exactly when and how the algorithm is smoothing the images. It may happen on two identical sites hosted on two different servers and one to be slightly blurred, while the other one is OK.

.prod_hold img {
    image-rendering: optimizeSpeed;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
}

One of the best things you can do is to use images as closer to the display size as possible.

regards,
Dimitar

[Author]

Posts