What can possible cause image look ugly in tab bar iOS?

Question

I have 2 images.

The first one (@2x: 50x50, 72 pixels/ inches) is like this:

It look so ugly in Tab Bar:

The second one (@2x: 48x42, 72 pixels/inches) is like this:

Even it is smaller, it look good in Tab Bar:

I cannot see the different between the 2 images. Can you see and tell me why? I'm new in designing images for iphone. How can I design good image for tab bar? Here you can download the images.

Answer 1

After hours of researching finally I found out the reason. It's so silly of myself but I have to post this with hope that it will save time for other iOS developers who also want to design their own app:

Basically when exporting images to be used inside your app, your need to export with with PNG-24 type. That's all. (See image below as an example).

Answer 2

According to the screenshot, I am suspecting image size.

I can't tell the exact reason why because never seen document regarding that found yet.

But in the practical experience those somewhat "distort" border problem happens when the image size and the control size are different even it has 1 pixel differences.

For example, My UIImageView size is 32x 50, and my @2x image file for that imageView is 64 x 101. This can be cases because when we slice down, original image can have this pixel differences and we keep it for aspect ratio.

In this case, the size can be said 32 x 50.5 which is actually a bit difference and then, the image is showing "distort" or "blur" at it's border

Solution is just change it's image size as required.

Answer 3

Now you can set that image size according to the devices you are using

Tab bar icon (optional) iPhone 6 Plus (@3x)

About 75 x 75 (maximum: 144 x 96)

iPhone 6 and iPhone 5 (@2x) About 50 x 50 (maximum: 96 x 64)

iPhone 4s (@2x) About 50 x 50 (maximum: 96 x 64)

iPad and iPad mini (@2x) About 50 x 50 (maximum: 96 x 64)

iPad 2 and iPad mini (@1x) About 25 x 25 (maximum: 48 x 32)