What can cause the image to look ugly in the iOS tab bar?
I have 2 images.
The first one (@ 2x: 50x50, 72 ppi) looks like this:
It looks so ugly in the tab bar:
The second (@ 2x: 48x42, 72ppi) looks like this:
Even smaller, it looks good in the tab bar:
I don't see any difference between the two images. Can you see and explain to me why? I am new to developing images for iphone. How can I create a good image for the tab bar? Here you can download images.
source to share
After hours of research, I figured out the reason. It's so silly, but I have to post this with the hope that it will save time for other iOS developers who also want to create their own app:
Basically when exporting images to be used inside your application, you need to export using the PNG-24 type. All this. (See the image below for an example).
source to share
Now you can set this 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) Approx. 50 x 50 (maximum: 96 x 64)
iPhone 4s (@ 2x) Approx. 50 x 50 (maximum: 96 x 64)
iPad and iPad mini (@ 2x) Approx. 50 x 50 (maximum: 96 x 64)
iPad 2 and iPad mini (@ 1x) Approx. 25 x 25 (maximum: 48 x 32)
source to share
According to the screenshot, I suspect the image size.
I can’t say exactly why, because I’ve never seen the document that I’ve found yet.
But in practical experience, these somewhat "distorting" border problems happen when the image size and control size are different, even if it has 1 pixel difference.
For example, My size UIImageView
is 32x50, and my @ 2x image file for this imageView
is 64 x 101. There might be cases because when we crop down, the original image might have these pixel differences and we save it for the aspect ratio.
In this case, the size could be specified as 32 x 50.5, which is actually a bit difference, and then the image shows "distort" or "blur" the border on it
The solution just resizes the image as needed.
source to share