
Blurred Images Are Everywhere - wx196
https://medium.com/@GreatUX/-898b38a6c0e1
======
AndrewStephens
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.

~~~
ajross
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.

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

~~~
M4v3R
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.

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

~~~
kinkrtyavimoodh
[https://news.ycombinator.com/item?id=15704661](https://news.ycombinator.com/item?id=15704661)

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

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

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

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

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

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

~~~
jwilk
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...](https://cdn-
images-1.medium.com/max/1000/1*QTXhwd9fNvtIK1sJn1yC3w.jpeg) vs [https://cdn-
images-1.medium.com/max/1000/1*ayqwAraBmA8AR6XWa...](https://cdn-
images-1.medium.com/max/1000/1*ayqwAraBmA8AR6XWaoqytQ.jpeg)

[https://cdn-images-1.medium.com/max/1000/1*6mlqCoOWR-8rwZ2RD...](https://cdn-
images-1.medium.com/max/1000/1*6mlqCoOWR-8rwZ2RDor9Bg.jpeg) vs [https://cdn-
images-1.medium.com/max/1000/1*Ex3O6Av63L6ge4riu...](https://cdn-
images-1.medium.com/max/1000/1*Ex3O6Av63L6ge4riuDteuQ.jpeg)

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

------
ricardobeat
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](https://bugs.chromium.org/p/chromium/issues/detail?id=562162)

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

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

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

~~~
bhauer
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.

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

~~~
antjanus
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.

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

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

------
qume
"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.

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

------
Cknight70
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](https://bugs.chromium.org/p/chromium/issues/detail?id=351458)

------
teddyh
> _I must admit that this problem is Chrome-only. IE renders much better_ […]
> _Firefox has good rendering as well_ […]

~~~
bla2
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.

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

~~~
s17n
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.

------
kristofferR
Firefox 59.0a1 results on macOS, the difference is massive:
[https://kristofferr.com/files/screens/Screenshot%202017-11-1...](https://kristofferr.com/files/screens/Screenshot%202017-11-15_05-25-11_PM.png)

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

~~~
ccozan
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?

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

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

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

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

------
omg_ketchup
srcset + sizes, anyone?

~~~
stephenr
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?"

