iPhone tab bar Item image resolution?

Question

What is the resolution of the image for the tab bar item?

And also, please provide some other useful information regarding that tab item image.

Thanks in advance.

Answer 1

The documentation says that the tab bar image is usually 30x30, but I've found that the best size to setup the images is 48x32 pixels. This size still renders and gives you a bit more space.

The image is a PNG with transparency, only the mask is used. The UI renders the mask gray when unselected or blue/chrome when selected.

Answer 2

http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html

When possible, you should use the system-provided buttons and icons in navigation bars, toolbars, and tab bars... For a complete list of standard buttons and icons, and guidelines on how to use them, see “System-Provided Buttons and Icons.”

Of course, not every task your application performs is a standard one. If your application supports custom tasks users need to perform frequently, you need to create custom icons that represent these tasks in your toolbar or navigation bar. Similarly, if your application displays a tab bar that allows users to switch among custom application modes or custom subsets of data, you need to design tab bar icons that clearly describe these modes or subsets. This section gives you some guidance on how to design icons that work well in navigation bars, toolbars, and tab bars.

Before you create the art for your icon, you need to spend some time thinking about what it should convey. As you consider designs, aim for an icon that is:

• Simple and streamlined. Too many details can make an icon appear sloppy or indecipherable.
• Not easily mistaken for one of the system-provided icons. Users should be able to distinguish your custom icon from the standard icons at a glance.
• Readily understood and widely acceptable. Strive to create a symbol that most users will interpret correctly and that no users will find offensive.

After you’ve decided on the appearance of your icon, follow these guidelines as you create it:

• Use the PNG format.
• Use pure white with appropriate alpha.
• Do not include a drop shadow.
• Use anti-aliasing.
• If you decide to add a bevel, be sure that it is 90° (to help you do this, imagine a light source positioned at the top of the icon).
• For toolbar and navigation bar icons, create an icon that measures about 20 x 20 pixels.
• For tab bar icons, create an icon that measures about 30 x 30 pixels...

Answer 3

This statement is technically incorrect:

"...only the mask is used. The UI renders the mask gray when unselected or blue/chrome when selected..."

You are not supplying any type of mask. Rather, the tab image should simply be a monochrome .png image, aka a only 1 color used.

If you provide a colored image, UIKit will quantize it down to a monochrome image. In the worst case the color image will be ~8000 bytes, which is a waste of ~6k (retina). The file format must be 24-bit .png with transparency for the quantization to work properly. Even though this is a color file format, don't use the color or you're wasting space.

Bottom line is to have the right size, with the best performance and memory usage, use one of these:

Standard display
  48x32 .PNG, 24-bit with transparency (but use only 1 color). Worst case size ~500 bytes.
  30x30 .PNG, 24-bit with transparency (but use only 1 color). Worst case size ~350 bytes.

Retina display
  60x60 .PNG, 24-bit with transparency (but use only 1 color). Worst case size ~2000 bytes.

Answer 4

Check the "UITabBarItem Class Reference" in the SDK documentation