Blurred Images Are Everywhere | Hacker News Reader

Blurred Images Are Everywhere

medium.com

60 pointswx19640 comments

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.

That's exactly how I felt reading that site. "See this other image? It sucks" ... It does? OK, I can see some differences in filtering I guess.

And it stands to reason that PS would be willing to do better downsampling (in the frequency space maybe using an FFT, or with some fancy kernel in the spacial domain) where a browser is probably just going to use a box filter, or have the GPU do it using whatever mipmap generator they provide.

But so what? If you have a site that cares about sampling at that level, you're never going to be happy letting someone else scale your precious pixels. Do it yourself.

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.

On a MacBook with a retina (high-DPI) screen, the browser resized versions of animal photos look much sharper to me, because the browser utilizes all the pixels, while the resized image doesn't utilize screen's resolution fully.

I was wondering why I wasn't noticing the problem the author talked about.

https://news.ycombinator.com/item?id=15704661

Make sure you resize the screen if you are reading this on a browser

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.

Oh ha! Thanks! I was on my laptop and was thinking I had really bad ability to detect image detail.

On my phone and the dog one looks identical to me

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.

On android it's just boxes because the font isn't available

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

The differences are subtle. It's easier to see if you open both images in two tabs and switch between them:

https://cdn-images-1.medium.com/max/1000/1*QTXhwd9fNvtIK1sJn... vs https://cdn-images-1.medium.com/max/1000/1*ayqwAraBmA8AR6XWa...

https://cdn-images-1.medium.com/max/1000/1*6mlqCoOWR-8rwZ2RD... vs https://cdn-images-1.medium.com/max/1000/1*Ex3O6Av63L6ge4riu...

If you have to do this to see the different then the differences are minimal enough not to matter to the average user.

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

Isn't the solution to use a media query to deliver 2x images only to double-density screens?

Or to use srcset?

Still affects any responsive layout, or image that is not displayed at their exact original dimensions.

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).

Agreed. Using a bitmap for a logo seems a bit silly considering the designer probably created it in a vector form and exported it as a bitmap at a developer's request. If you have a vector source, you might as well retain the upsides of that through delivery.

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

the rabbit is very telling if you look at the fur around the eyes. You can see that the browser-downscaled rabbit has fur that kind of blends together while the photoshopped one is very crisp.

> 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

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

Chrome used to do lanczos filtering, but moved to bilinear because it needs less energy and looks good enough, especially in high-dpi. Seems like an ok engineering decision.

As if even simple cubic interpolation is energy intensive. Or allowing the GPU to scale instead of doing it in software.

Every milliamp counts on mobile and users don't give a shit about subtle differences in image quality. Chrome is doing the right thing here.

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.

I was about to say that I can't really see any difference, then I realized I have FF 57 and then they must have been some improvements in this direction.

Maybe some Mozilla devel can confirm this?

I remember reading a long time ago that Firefox interpolates scaled images by default. I am having trouble finding it on mobile though.

It looks massively different because your browser is not doing any actual rescaling. The 'browser' images are actually just as small, and might be screenshots of the author's instance of Chrome.

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.

srcset + sizes, anyone?

Yeah, I basiclaly avoid front end dev as much as possible and even I though "isn't this just a case of deliver the right density image for the device?"

Reply on news.ycombinator.com