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