What should image sizes be at @1x, @2x and @3x in Xcode?

ios xcode uiimage
user2053760 picture user2053760 · May 5, 2015 · Viewed 89.3k times · Source

For example, I have a 100*100 size imageview or button, and I want to set its image or backgroundImage with a local .png file. Based on my understanding, I need to create 3 sets of images, i.e. 100*100 for @1x, 200*200 for @2x, 300*300 for @3x. I am not sure if my understanding is correct or not, can anyone help?

Answer

enadun picture enadun · Apr 9, 2016

According to my understanding, if the image size is 100 * 100

@1x -> 100 * 100

@2x -> 200 * 200

@3x -> 300 * 300

enter image description here

There is something to understand. By creating 2x and 3x images, you can't expect exact same layout from each iPhone screen. The layout will be different from screen to screen. 1x, 2x and 3x image sizes dealing with only the pixel density of the screen.

Suppose you have an image which is 320 * 70 and you are creating

@1x -> 320 * 70

@2x -> 640 * 140

@3x -> 960 * 210

This will be your output in different screens. enter image description here

Related questions

How do you create a UIImage View Programmatically - Swift

I'm trying to create a UIImage View programmatically, I have a new view and I tried doing this let imageName = "yourImage.png" yourview.backgroundColor = UIColor.colorWithPatternImage(UIImage(named:imageName)) this did not work because I don't know what this should …

Read More
UIImage imageNamed returns nil

I am pretty new to iOS and Xcode. I tried to load an image with [UIImage imageNamed:@"imageName.png/jpg and so on"]; but it only returns nil. The image should be in my project bundle, considering the fact that …

Read More
Align button image to right edge of UIButton

There are plenty of threads about aligning a button image according to the title text, but I can't find anything about just aligning the image to the right side of the button. This has no effect: button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 50); How …

Read More