iOS: How to set the proper image scale for a bar button item

Question

I'm trying to add my own image as a bar button item, but I don't know how to get the image to scale properly. Apple's Human Interface guidelines recommends that my image be 44x44 px, but when I use a 44x44 px image, it is too large for the toolbar, as you can see:

When I use a smaller version of the image, it looks pixellated on the Retina display. What am I supposed to do here?

Solution 1

In images.xcassets, you can add the images as 1x, 2x and 3x. Xcode will use the appropriate image size depending on the device.

Solution 2

You need to follow apple guidelines for designing you can find it from this link https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1

You can find the attached screenshot image for correct sizing for the UIBarButtonItem image size as par the apple guidelines you have to use 44X44 for ratina (@2x) and 22X22 for normal (@1x) for UIBarButtonItem

Solution 3

width 22 pixels X height 22 pixels - ideal for left or right BarButtonItem. You can resize any image to custom sizes using online tools, one such I used is http://www.picresize.com/