0

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

Adam
  • 147
  • 4
  • 11

1 Answers1

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.

Community
  • 1
  • 1
GayleDDS
  • 4,443
  • 22
  • 23
  • This clears up my confusion about whether the dpi matters, but what can I do to make my 32x32 icon look sharper? I export it from Illustrator and it looks fine when I open it up, but when it's applied as the icon's image it gets pixelated. – Adam Aug 30 '13 at 20:02
  • you need to export a 64 x 64 icon from Illustrator too. You can't up scale from 32 too much detail is lost from the original. – GayleDDS Aug 30 '13 at 20:22
  • I made it 64x64 then scaled it down for the 32x32. – Adam Aug 30 '13 at 20:58