Sizing PNGs for Developers

Screen size and screen resolution are two different things. Forget about the 2X and 3X part for a second. How are you going to physical image sizes (not resolution) between all those platforms? Are your images going to be sized at a percentage of the users screen, are they fixed width images? We all have this issue no matter what. From an iphone to a desktop, how big are our images, and when do we resize them? That choice is up the designers and developers.

Now going back to the 2X and 3X discussion. Once we know how big the image is going to be, we can prepare these images. Let's use easy numbers.

Let's say you have an image that at standard resolution is 200px by 200px at 163ppi (pixels per inch). Now you have a 200 x 200 image at standard resultion for an iPhone 3GS, but we can use this as our baseline.

To build raster images for rentina display's, we need to increase the number of pixels in the same size. So you would generate a 400x400 image, and that would be your 2X, and generate a 600X600 image and that would be your 3X. But when the image is acutally used, both the 400x400 and 600x600 will still be scaled back down to a physical size of 200x200 on the screen. Because of this, we have 2 and 3 times the number of pixels in the same size image respectively, which the retinal displays beautifly since they have about 2 and 3 times the number of pixels per inch in their screens than a 3GS had.

I think where you are getting confused is rendered size vs physical size. Two different issues. Resolution only deals with pixels per inch.

Here is a handy guide. http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Finally! Thank you! It makes so much sense now, I can't remember what I was thinking before.