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.
Blurred Images Are Everywhere
11–20 of 43 posts
Re: Blurred Images Are Everywhere
#12Firefox 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.
Re: Blurred Images Are Everywhere
#13> I must admit that this problem is Chrome-only. IE renders much better […] Firefox has good rendering as well […]
Re: Blurred Images Are Everywhere
#14The 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.
Re: Blurred Images Are Everywhere
#15Firefox 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?
Re: Blurred Images Are Everywhere
#16I'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...
Re: Blurred Images Are Everywhere
#17Firefox 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.
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.
Re: Blurred Images Are Everywhere
#18> 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.)
Re: Blurred Images Are Everywhere
#19I 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.
Re: Blurred Images Are Everywhere
#20The 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.