Chrome images look blurry

[demonboy]

Hi,

I’ve noticed a distinct difference in the way Chrome renders photos compared to Firefox. On Chrome they are blurry:

I’ve been looking this up and came across this code:

div.upcp-detail-image-div img {
    image-rendering: -webkit-optimize-contrast;}

I have tried it and it doesn’t appear to make any difference. Also I notice that this is happening to scaled up images. The first three thumbnails are scaled up from 150 to 200px, whilst the last image is scaled down.

[christopher]

Hi @demonboy,

You will not have luck trying to remedy the problem as the degrading of the image when it scales up is something that you can not avoid. Some browsers do a better job than others but at the end of the day, it will not be a good result.

Scaling up the images is a no-no and you’d better use bigger images in that case scenario.

Thank you.

[demonboy]

I misled you. That was just one example and in that example it’s a little more complex. The original image is actually 300px, which is downsized to 150, and then on the homepage that 150px image is scaled up to 200 but it won’t be taking the 150px image, it’ll be taking the original 300px image. The same is happening for all images, whether they are scaled up or scaled down inc avatars and thumbnails. Moreover this is only happening in Chrome. Firefox renders them correctly.

[friech]

Hi @demonboy,

That is the srcset and sizes attributes of the image a feature in WordPress introduces on WP version 4.4 (more details here). The Theme has nothing to do with this feature, maybe one of your plugin is doing it. Do you have Jetpack? Try deactivating its Site Accelerator (Formerly Photon) feature or any image optimizer feature do you have.

If the issue persists, please do a testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Cheers!

[demonboy]

That still does not explain the discrepancy between FF and Chrome. I appreciate this is not an X theme issue but plugins or the srcset/sizes attributes would have a global impact, not a browser-specific impact.

[christian]

Hey @demonboy,

I grabbed a screenshot of an image rendering in Chrome and Firefox and I looked closely in an image editing program. The result, the pixels look almost the same. Chrome just renders the image a bit softer than Firefox.

Here’s a comparison using WordPress’ Responsive Image (SRCSET).

There’s a difference but not much. Chrome uses a slightly smaller size than Firefox.

It’s an image in my test site by the way so this is really not a theme issue and we can’t do anything regarding the difference between the image render method of different browsers.

I recommend you contact Chrome and Firefox’s support to learn why they render differently.

Thanks.