Blurry image rendering in Chromium browsers

[SeriousHoax]

All Chromium browsers have a problem with image rendering. The images are blurry, less detailed and low quality compared to the crisp and sharp images on Firefox.
I don't know if it happens for 100% of the users but personally I have asked 5 people with 5 different PC configuration to check this out for me and they have confirmed this including @silversurfer whom I asked few months ago. I noticed this for the first time almost 3 years ago but being a Firefox user I didn't bother and it was one more reason for me to stick to it. But I did show this to two of my Chrome user friends and after that they both installed Firefox for browsing Flickr only.
There are also many complaints online. Like these:
Blurry downscaled images in the Chrome 84
Blurry downscaled images in Chrome
Images little Blurry in Chrome
And of course here's a 5 years old bug on Chromium bugs which somehow hasn't been fixed yet:
Issue 562162: Background images are blurred when scaled down since 46

If you've always used a Chromium browser you may not know what I'm talking about so in order to check it by yourself you'll have to install Firefox and compare to see what I'm talking about.
For a basic test, look no further than my own DP here on MalwareTips. It's quite blurry on Chromium browsers but sharp and clear on Firefox. It's also clearly noticeable on my system in @Gandalf_The_Grey's current DP.
For a larger image you may take a look at this picture:
2020 Nissan Frontier review: Past meets future
Open this in a Chromium browser & Firefox and compare the details of the car as well as the background. No explanation is needed I think.
For average users this may not be a big deal but a serious issue for photographers around the world.
It needs to be fixed soon. The number 1 browser engine of the world rendering blurry images makes no sense.
YouTube video also plays better on Firefox with 0 frame drops while frame dropping is common in Chromium.
Btw, both problem seems to go away if you disable hardware acceleration but that would put more pressure on the CPU so not an acceptable solution.
Among the links posted above there's a suggested solution which kind of works pretty well to minimize the image rendering problem.
This CSS needs to be loaded by the browser in every webpage.

img {
image-rendering: -webkit-optimize-contrast;
}

This is not an ideal solution because it's often over sharpening images on my system. Edges don't look smooth and the emoji icons here on MT also looks bad. So, it's not comparable to Firefox but a huge improvement over the default rendering.
I don't know how to make the browser load this CSS on every page so I'm using this extension to do so,
Stylus
Let us know if you're also seeing this image rendering variance on Chromium vs Firefox and I would really appreciate if you also send feedback to the Microsoft Edge and Brave team.

 

[ForgottenSeer 85179]

For a basic test, look no further than my own DP here on MalwareTips

With DP you mean the picture on your profile? I can't open it because:
"This member limits who may view their full profile."

But i compare the car picture in Edge (doing a screenshot and view it in Paint) vs downloading the whole image and open it with Paint.
No blur.

 

[SeriousHoax]

With DP you mean the picture on your profile? I can't open it because:
"This member limits who may view their full profile."

But i compare the car picture in Edge (doing a screenshot and view it in Paint) vs downloading the whole image and open it with Paint.
No blur.

You don't need to visit my profile, just how you are seeing my DP here above my comment.
And you won't see the difference by downloading picture because in that case any browser would download the actual file. You need to simply open the same page on both Chromium and Firefox to see the difference.

 

[upnorth]

I can confirm this as I also use Firefox, but here's a pretty important point! Professional photographers use specific software for their needs ( editing etc ), so I highly doubt it's an actual issue for them. It's only when they share their work online it obvious would need a possible fix, unless they already dealt with the problem on their own site/s. But 5 year and still not fixed?

Spoiler

 

[Gandalf_The_Grey]

It's all a bit vague, but I hope the Edge team is working on it based on this one line here:

Status

Feedback

On this list

Planned

Some web page fonts are blurry

26 weeks

Top Feedback Summary for November 3

Note: This is no longer the most recent top feedback summary. You can always find the latest at https://aka.ms/MSEdgeTopFeedback. Hello, Insiders! Can you..

techcommunity.microsoft.com

And as posted there will be more font rendering options for windows through power toys:
Windows 10 - Windows 10 might get a new font rendering system and color picker
Roadmap:

Roadmap

Windows system utilities to maximize productivity. Contribute to microsoft/PowerToys development by creating an account on GitHub.

github.com

Issue:

Adjust how fonts render in Windows · Issue #6918 · microsoft/PowerToys

Windows is great at supporting a vast amount of hardware but for some users, they want their fonts to render differently. This comes into play more and more with higher resolution screens. Possible...

github.com

 

[mkoundo]

i never noticed it before but you're correct. It's almost like your eyes are playing tricks..

firefox 82.0.2 on mx linux (virtualbox)
vs
edge 86.0.622.63 on win 10 20H2 19042.572

Spoiler

 

[SeriousHoax]

Professional photographers use specific software for their needs ( editing etc ), so I highly doubt it's an actual issue for them. It's only when they share their work online it obvious would need a possible fix

I still think it's a serious issue for them because like you said, we know professional photographers often share their photos online. It can be facebook, twitter, instagram, photographer oriented platforms like Flickr, etc where every details matters. Maybe except Flickrs, in this example all sites already compress each photos which hampers picture quality to some extent and then this blurry rendering of Chromium makes things far worse.
Here's a flickr profile of one my school friends who's an armature photographer. I can clearly see his photos look a lot worse in Chromium but he probably doesn't even know that and thinks that's the compression problem because I know he uses Google Chrome.

Tanmay Shikder

Explore Tanmay Shikder’s 236 photos on Flickr!

www.flickr.com

So it's not a problem as long as you don't know about it but when you see it's unseeable.
And yeah! 5 years now! What are they doing!

 

[SeriousHoax]

i never noticed it before but you're correct. It's almost like your eyes are playing tricks..

firefox 82.0.2 on mx linux (virtualbox)
vs
edge 86.0.622.63 on win 10 20H2 19042.572

Spoiler

View attachment 248690

That's a great screenshot. So even in Linux, Firefox is rendering the image correctly.

 

[Cortex]

I was (very) skeptical but I installed Firefox which I said I would never do again & was convinced this wasn't true - However you are dead right! After getting a new Samsung 32" display @ 3840 x 2160 a couple of months ago I really want things to look the best they can, the difference is quite profound, this was against Brave that I don't think was mentioned? - After thinking it may be my imagination I asked my 20 year old daughter to look & it just took a few seconds for her to agree - Going to run both browsers together for a while & see - Thanks

 

[brambedkar59]

All Chromium browsers have a problem with image rendering.

Yup, image rendering is pretty different on FF compared to Chromium browsers when you compare them side by side, never noticed it before. Feedback sent on Edge.

YouTube video also plays better on Firefox with 0 frame drops while frame dropping is common in Chromium.
Btw, both problem seems to go away if you disable hardware acceleration but that would put more pressure on the CPU so not an acceptable solution.

Firefox has issues as well. I was dropping frames on Youtube 4k@60 left and right on Firefox, issue was WebRender. Disabling it solved it.
Here's a similar bugreport. Issue is in the way how Firefox handles the decoding process. 1658392 - Stuttery playback of 1440p video on YouTube with UHD 600

 

[oldschool]

For a larger image you may take a look at this picture:

It's indeed a cleaner image on FF, even on my chintzy laptop.

 

[SeriousHoax]

the difference is quite profound, this was against Brave that I don't think was mentioned?

This is true for all Chromium based browsers like Chrome, Edge, Brave, Opera, etc so I just wrote Chromium instead of naming them all.

 

[SeriousHoax]

It's indeed a cleaner image on FF, even on my chintzy laptop.

Hmm I also had the same experience in my previous laptops. This is hardware acceleration related because turning it off makes images look similar to Firefox. Not sure why it's so hard for them to do something about it.

 

[SeriousHoax]

It's all a bit vague, but I hope the Edge team is working on it based on this one line here:

Status

Feedback

On this list

Planned

Some web page fonts are blurry

26 weeks

Top Feedback Summary for November 3

Note: This is no longer the most recent top feedback summary. You can always find the latest at https://aka.ms/MSEdgeTopFeedback. Hello, Insiders! Can you..

techcommunity.microsoft.com

And as posted there will be more font rendering options for windows through power toys:
Windows 10 - Windows 10 might get a new font rendering system and color picker
Roadmap:

Roadmap

Windows system utilities to maximize productivity. Contribute to microsoft/PowerToys development by creating an account on GitHub.

github.com

Issue:

Adjust how fonts render in Windows · Issue #6918 · microsoft/PowerToys

Windows is great at supporting a vast amount of hardware but for some users, they want their fonts to render differently. This comes into play more and more with higher resolution screens. Possible...

github.com

But these are font rendering related issues. I don't see anything related to image rendering

 

[SeriousHoax]

Now I'm also seeing Firefox rendering videos better than Chromium browsers. Better sharpness, more details and accurate color in Firefox for YouTube videos at least.
But I'm still not sure if this is happening on my device only or even this one is a universal issue of the Chromium engine like the awful image rendering.
I'll share my finding in full details with an example video hopefully tomorrow. Till that if anyone knows about this or can already do some testing then share your findings here.
Edit: The obvious noticeable difference is color.

 

[SeriousHoax]

I'll share my finding in full details with an example video hopefully tomorrow.

Didn't know my tomorrow comes 6 days later. Lol.

Anyway continuing on the low video rendering of Chromium browsers, I did some more checking with multiple videos, updated my device's video driver, checked Edge and Chrome but the result still remains same for me. Less detailed, unnatural, added white color in Chromium while crisp, accurate color and details in Firefox. But I need to know if this happens on everyone's device.
For testing you need to have Firefox installed of course.



As an example open this video in Firefox and in any Chromium based browsers. Then simply compare the details on her face, eyes, the color of the door on her left, color of her dress, etc. It's better if you don't compare both side by side. Use "Alt+Tab" instead to switch between the browsers and you should immediately see the massive difference in quality. I don't even need to play to the video to see the difference. Simply pausing at the first frame makes it obvious. The video looks a lot better in Firefox. This is how it should look I think.



Then you may take a look at this video for another example of color and details difference.
Pause this video around 5/6 seconds in both browsers, go full screen then switch between them with "Alt+Tab". Check the black background image of the two tablets shown in the video. The black looks like proper black in Firefox but there's kind of a whitish effect on it in Chromium browsers. Check the label of the app icons on the displays. Instagram, Messenger, Telegram those texts looks clearer in Firefox compared to Chromium. It looks a bit blurry in Chromium. You can check other details like the indoor light in the background, etc too.

Every video is like this. Looks a lot better in Firefox. Now let me know if you see this difference too.

 

[silversurfer]

To be honest, I haven't found much difference, but it's more visible in the 1st music video, there looks a little bit better on Firefox!
I can't see any difference in the 2nd tech video, but for me it's difficult to check for details

 

[plat]

Interesting...Installed Firefox and alternated between that and Opera using ALT + Tab as suggested. On here, the golden pattern against the dark blue, there was some flutter in Opera. Firefox 's rendering was steady but more muted. All other elements were pretty much equal. Maybe there's some influence from the graphics processor/hardware acceleration (enabled). (To record the clip, I couldn't use alt + tab b/c Bandicam would always jump into the screen despite changing hot keys). It's a little fast but hopefully you can see the difference.

For static images: yes, Edge specifically has a problem with image rendering on here; it's less sharp and clear. I took it off my default list a while ago and that was one of the reasons. So, I suspect it's also maybe partly browser-specific b/c Opera is a bit better in that dept.

Spoiler

 

[SeriousHoax]

To be honest, I haven't found much difference, but it's more visible in the 1st music video, there looks a little better on Firefox!
I can't see any difference in the 2nd tech video, but for me it's difficult to check for details

Thanks. Good to know that you're also seeing that Firefox is rendering it better. So it's not exclusive to my device.
Yes, it's obvious in the first video. I shared the second video to focus on the color difference only. Here black looks like actual black in Firefox. The same goes for other colors when looked closely.

 

[SeriousHoax]

Interesting...Installed Firefox and alternated between that and Opera using ALT + Tab as suggested. On here, the golden pattern against the dark blue, there was some flutter in Opera. Firefox 's rendering was steady but more muted. All other elements were pretty much equal. Maybe there's some influence from the graphics processor/hardware acceleration (enabled). (To record the clip, I couldn't use alt + tab b/c Bandicam would always jump into the screen despite changing hot keys). It's a little fast but hopefully you can see the difference.

For static images: yes, Edge specifically has a problem with image rendering on here; it's less sharp and clear. I took it off my default list a while ago and that was one of the reasons. So, I suspect it's also maybe partly browser-specific b/c Opera is a bit better in that dept.

Spoiler

Opera is blocked in my country so I didn't check it before but I just did and don't see any difference compared to Edge.
You may not noticed any difference the way you showed in the video. Even in my PC when I put them side by side and take a screenshot the difference isn't too noticeable.
This is why I suggest to enlarge the video player/go full screen and use "Alt+Tab" method. Captured image/recorded video to compare is not going to work.