Blog is available in backup mode, go to github-pages for newer posts

Back to articles list

Icons and high-density displays.

As we know Apple pioneered "retina" displays with iPhone about 5 years ago and now most handhelds and even some portion of desktop displays have higher pixel density (incidentally Jacob Nielsen predicted that, but he expected that to happen a whole decade earlier). Mobile devices got even higher densities up to mind-blowing 500 ppi. It is dppx or device-pixel-ratio what is of our interest. We'll return to it soon.

While there are hot debates about providing hi-res illustrations for users (in short, we need to balance between quality and the size)... with icons situation is much more skewed towards quality:

But we need to serve a lot of various resolutions to always have the best quality. Of course, one can say that SVG is going to save the day, but it's not actually that good. It lacks pixel hinting and even www consortium realizes that. SVG icons w/o hinting are a little blurry at lower resolutions: 1x, 1.5x, 2x, let alone downscaled bitmaps.

Here is a demo of how worse is the downscaled image comparing to hand-crafted one. Flags of Serbia, base size 18x12, @1x, @1.5x and @2x. Downscaling was performed on SVG from wiki. Even though this is not about pixel-hinting per se, it shows the difference between stupid downscale and manual work.

flags of Serbia

The image is at 4x zoom for the sake of illustration. BTW since then, I've created a 1.25x, 2.5x, 3x and 4x.