Blurred Images Are Everywhere (opens in new tab)

This is the case since late 2015, and they haven't budged since. If you want to provide a @2x image to look nice on hi-dpi, or simple responsive elements, you are out of luck. It worked fine before, I really don't get why this is being ignored. At my job we went so far as experimenting with image-rendering: optimize-contrast, but it doesn't work well for logos / solid shapes, so we have to live with blurry crap in the most popular browser.

https://bugs.chromium.org/p/chromium/issues/detail?id=562162

Firefox 59.0a1 results on macOS, the difference is massive: https://kristofferr.com/files/screens/Screenshot%202017-11-1...

Chrome looks basically the same, so I didn't bother screengrabbing that.

The key observation is a) responsive web pages often use large images and rely on the browser to scale them down; b) browsers do a bad job of resizing compared to e.g. Photoshop.

This is true but I don't think it's a very big problem. Most recent phones have ridiculous high screen resolutions so the blurring is completely invisible. Desktop PCs tend to have large screens, so not much downscaling is needed, and high-DPI screens are getting more common there too.

It's definitely a good idea to use SVGs for line art, if possible. And browsers ought to use better resizing filters, it's not exactly rocket science.

But with a high-DPI screen, even low-quality resizing looks fine.

Make sure you are reading this blog on a phone or change the width of your browser to resemble that of a phone, otherwise you won't be able to see what he is trying to point out. On normal laptop screen size, the 'original size browser resized' ones are sharper than Photoshop resized ones.

I'm not seeing much difference in the photos, but with the logos it is certainly noticeable and in some cases even affects readability.

> I must admit that this problem is Chrome-only. IE renders much better […] Firefox has good rendering as well […]

This guy is not wrong, but on my site I decided that for photographs it probably doesn't matter much and just provide a single image resolution. Chrome does a terrible job of resizing images but even it is acceptable. Maybe if you run a high-end stock-photo site you have other opinions, but I don't.

Logos and illustrations are a different matter, but the answer is not to turn on an obscure rendering option via css. You either supply images in all sizes your site requires, or use the format that was explicitly designed for such things: SVG.

I find it very clever that the author is using characters in the Unicode "Mathematical Double-Struck Small" range for the title, so that it appears blurry in the browser title bar.

I think that everything other than complex images should be SVGs, especially logos. They don't only look great, they also make life a lot easier (e.g. sizing).

I am so happy I can’t tell the difference with most of those images. That would drive me nuts!

srcset + sizes, anyone?

> image-rendering: -webkit-optimize-contrast;

So what does that do, algorithmically speaking?

(If I search for it, I get lots of pages saying the property is broken.)

I think this is a non issue for most visitors and sites. I can see this being a problem for photography sites and enthusiasts, however, for the average Joe like myself, our eyes have not been trained enough to "look" for the imperfections the author is describing.

"What developers should do right now is to turn on webkit auto-sharping property"

No, no please don't take this advise.

This is a good start on an important subject, but it's not that simple. The aliasing on line art type images is horrible, even on the example on the page.

A far more annoying blurring occurs when you enlarge pages because they were designed for small / low resolution screens.

Currently I zoom most pages to 150% and bitmapped logos look horrible, even using the best possible algorithms in image processing software.

This reminds me of another very noticeable issue Chrome used to have with hardware acceleration enabled for html5 videos. I ended up turning off hardware acceleration when they started forcing html5 on YouTube because it bugged me so much. https://bugs.chromium.org/p/chromium/issues/detail?id=351458

This is just a study of filtering algorithms. The author is just looking at Photoshop's (default!) bicubic filtering, which emphasizes high-frequency detail content at the expense of accuracy. The browser examples are doing simple linear filtering.

Who is resizing logos and artwork like this in photoshop? I would never resize a corporate logo like that. If I needed a .png in a specific size it would usually be rendered for web straight from the svg or AI file.

Safari does a good job I guess, or my eyesight is getting really bad.