21–30 of 43 posts
> I must admit that this problem is Chrome-only. IE renders much better […] Firefox has good rendering as well […]
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?
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. Y…
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.
> 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.
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-D…
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.
Currently I zoom most pages to 150% and bitmapped logos look horrible, even using the best possible algorithms in image processing software.
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...