XCode: Tab Bar Item image is pixelated

Question

I am using custom images for tab bar icons and they are showing up pixelated and I can't figure out why. The image is 32x32 and 300ppi. I've tried it on 72 and 150ppi and they are all pixelated. Anyone have a solution?

Thanks, Adam

Answer 1

You need two images one 32 x 32 pixels and named MyIcon.png and one 64 x 64 pixels named MyIcon@2x.png. You then specify MyIcon in the storyboard and iOS will load the correct image for the current hardware.

The ppi (is a print production concept) has no effect in iOS. iOS measures every thing in Points, the iPhone 5 screen is 320 points x 568 points. Retina screens are 2 pixels x 2 pixels for each point. Non retina screens are 1 pixel = 1 point.

UPDATE: For the iPhone 6 Plus (iOS 8) you now need a third image MyIcon@3x.png that is 96 x 96 see Image resolution for new iPhone 6 and 6+, @3x support added? for lots of good details.