Are large icons enough for Retina displays?

Question

I'm developing a program that has icons. I've been wondering if I really need to use vector icons (as they are hard to come by and find), or could I just use larger icons such as 256x256 icons (for up to 64px sizes)?

Answer 1

Well, iOS icons are not vector graphics. They're PNG images, using the following resolutions:

iPhone non-retina: 57 x 57
iPhone retina: 114 x 114
iPad non-retina: 72 x 72
iPad retina: 144 x 144

In addition, if you develop for the AppStore, you have to include an iTunesArtwork file, which is also a PNG of 512 x 512 pixels (independently from the fact whether or not your app is retina).

Answer 2

If you want to display a 64px image, then use a 64px icon. As soon as you start scaling you will lose some quality (although scaling by powers of 2 is not nearly as bad as arbitrary scaling factors)

However, when you get to sizes in excess of 64 pixels, the effects of scaling become ever less noticeable, so you can start to use scaled icons rather than device-dependent resolutions without worrying so much about loss of quality.

The main thing is to draw the main features of your icons to match the lowest common denominator resolution you expect to support. For example, if you are going to use a 32x32 icon on some devices, and 64x64 on others, then make your lines 1 pixel thick in the 32x32 icons, which equates to 2 pixels thick on the 64x64. In this way the 64x64 will look like a "sharper" version of the 32x32 rather than the lines being thinner or the 32x32 icon being "blurry" (e.g. where a thin black line on the 64 image becomes a thicker grey line due to antialiasing on the 32).

In general, you should also design your graphics at a high resolution (e.g. "retina" resolution is a stupid marketing ploy and is only about a quarter of real "retina" resolution - you can be sure that screen res will double again just as HDTV is already starting to be superceded to 4K and 8K). So I'd recommend using 256 or 512 resolution for your master image (but still base its features on a 32x32 or 64x64 grid) and then scale this image down and then touch it up to achieve good quality on the lower resolutions. That way, if (when) you need your icon at a higher res, you don't have to redraw it from scratch. (If possible, design your icon as vector art and then just re-export it at the various pixel resolutions you need)

Also, if you avoid high contrast edges your icons will scale more easily (as scaling a high contrast edge down usually results in a blurry antialiased result unless the edge perfectly lines up with the lower-res pixel boundaries). So a typical soft grad-shaded apple or android icon is going to scale down much better than a typical hard high-contrast win8 line drawing)

Finally bear in mind that just because your devices of today use 32x32 and 64x64, it doesn't mean that you won't find yourself porting to a device where icon sizes are quite different in the next 6-12 months (e.g. 57x57, 72x72 etc) and rescaling won't work nearly as well. In these cases the larger your source image the better the results of scaling it down will be (i.e. scale a 512x512 down to 72 will usually give better results than scaling a 128x128 down to 72).