ios - Confusion about @2x @3x Xcode images -

the apple guides haven't helped me starting serious ios development , taken aback when saw images go @1x @3x.

one source found said based on sizes. example:

if working on inferred vc size , image 30x30 , run on iphone6 image should 30x30 @3x, 20x20 @2x, , 10x10 @1x.

another source said mentioned based off images resolution , not size of image.

could clear me , explain how make sure images professional screens?

thanks in advance!

when first iphone (and sdk) came out, images 1x (1 pixel of image = 1 pixel of screen), because that's had care about. on phone there 166 horizontal or vertical pixels per inch (dpi). display image stretched left edge right edge, our image need 320 wide (because that's apple told - didn't have count pixels) whatever height wanted. let's 100 pixels tall. we'd name image myphoto.png (because apple told iphone os worked best png images) , we'd display it.

when iphone 4 came out retina display, retina display had 2 times horizontal , 2 times vertical resolution of older phones. needed higher resolution images best looking interface. still displaying 2" wide image, need twice number of horizontal pixels , twice number of vertical pixels (4 times total number of pixels) fill same space. our image needs 640 pixels 200 pixels. since our app still need support older phones new phones, didn't want replace old image new one. needed way support both. old images kept same name had before (we didn't append "@1x") , new images got "@2x" filename extension indicate twice resolution. we'd name larger image myphoto@2x.png.

a common question why not use higher resolution images on both old , new phones? scaling, both appear work great. problem iphone, older phones, had limited memory work with. using images 4 times larger need hard on limited memory. that's why had have both 1x , 2x images in our apps.

for our sanity, still use 1x while designing interfaces. screens remained 320 pixels wide in our code, if going display them on retina display 640 pixels wide. if wanted draw 1 pixel wide line on retinal display, we'd make half pixel wide in our code.

with larger screen of iphone 6 plus, apple had pack more pixels on screen maintain high resolution customers came expect. we're 3x images. however, iphone 6 plus doesn't have 3 times number of horizontal or vertical pixels. again apple has kept sane asking supply "@3x" images, , worries scaling them down bit on device. before, still need support smaller screen resolutions too, still include "@2x" , 1x images in our apps.

so, continue our example, @3x image need 3 times width , height of 1x image. need 960 wide 300 pixel tall image. we'd name myphoto@3x.png.

notice although mentioned earlier 166 dpi display, that's not important when creating these images. in photo editing app don't care if image 166 or 72 dpi or else. important part number of pixels in width , height of final image export.

so answer question (hopefully), you'll want include 3 of these images in iphone compatible apps. can skip @3x image ipad-only apps, because there's no 3x screen yet ipad. continue think in 1x size when working in interface builder , code.

for example, display 1 pixel wide line on iphone 6 plus, you'd draw 0.33 wide line rather 1 point line. of course, still want support of other screen resolutions too, you'd use code set line width:

let linewidth = 1.0 / uiscreen.mainscreen().scale 

this give 1.0 non-retinal iphones, 0.5 iphone 4, 5 & 6, , 0.33 iphone 6 plus.