Understanding Image Size for Different Resolution Screens

Question

I'm having a hard time putting all the information on image sizes for @1x, @2x, and @3x together. I've been using the scene editor in XCode with the scene size being 1334x750 (pixel dimensions of the screen of the iPhone 6). So when I size an image for a sprite in that scene, is that the size I should use for the @2x?

From what I've read in the documentation CGSize uses points, not pixels, so if I have an image that is CGSize(width: 50, height: 50), is this independent of my scene size in the scene editor?

Bottom line question: How does the CGSize dimensions translate to how I export my images for @1x, @2x, and @3x in pixels and what should the PPI be when I export?

Answer 1

Xcode can handle vector images, so you can forget about @2X and @3X images if you are able to export your images as PDF eg in Sketches export panel one of the options for export format is PDF, so create your artwork @1X and export as PDF, then in Xcode when you add the image to Assets.xcassets, you can set the images Scales attribute to Single Scale . Xcode will generate the required @2X and @3X images from your vector PDF at build time.

Answer 2

The concept is simple. The size in Storyboard or Interface Builder should be the size of you asset in @1x format.

The retina display ( or the iPhone 6+ @3x size ) does not mean than you have much space than before, it means that you can draw 2 ( or 3 ) pixels where you draw 1 before.

So for a 50x50 px Image View, cou should have 3 assets : - Image@1x.png ( 50x50 px) - Image@2x.png ( 100x100 px) - Image@3x.png ( 150x150 px)

Answer 3

Suppose you have created an image in your assets library consisting of 3 sets of same image, @1x.png having size 50x50 pixels , @2x.png of size 100x100 pixels and @3x.png size 150x150 pixels .

you don't needs to worry about which one to use in your storyboard(because storyboard automatically using @1x.png), and which one to use for the targeted device like as iPhone6, or iphone7, or iPad(because by default programing all hardware finds out their pixels relative required image among those @1x.png, @2x.png and @3x.png)

for further instructions you needs to study Auto layout Programing Guide you can also view their apple's tutorial videos regarding Auto layout.

mysteries of auto layout part1

mysteries of auto layout part2

Answer 4

@1x and @2x used to relate to the retina graphics change when iPhone 4 came out.

iPhone 3GS was 320x480, iPhone 4 was 640x960. This meant that the points per inch were literally the same, but the ppi was doubled, hence the @2x . When the iPhone 5 came out, the only thing that changed was the height, so the ppi was the same for the width, no problems here.

Then we hit the 6 and 6+. At this point, apple said screw it, try to keep ppi that correlate to previous iPhones without having keep the previous iphones usable area, or provide bigger screen pixels for bigger devices. Now @2x has lost its original meaning

But, to really throw us off, they made the iPhone SE, which went back to the ppi screen size of the iPhone 5, so @2x makes sense again.

Basically, when thinking of the @2x graphics, think about the 1st iPhone resolution size.

Now, you have a choice to make. You can give your apps more/less usable area, you can black box the extra usable area, or you can scale and take some kind of quality loss due to game pixels not being 1:1 with the screen pixels anymore.