ios - How to handle image scale on all the available iPhone resolutions? -


what sizes best use images: background.png, background@2x.png , background@3x.png if want use image example cover full width , half height of screen on resolutions iphone portrait app?

this have now:

device          points    pixels     scale  physical pixels   physical ppi  size iphone x        812x375   2436x1125  3x     2436x1125         458           5.8" iphone 6 plus   736x414   2208x1242  3x     1920x1080         401           5.5" iphone 6        667x375   1334x750   2x     1334x750          326           4.7" iphone 5        568x320   1136x640   2x     1136x640          326           4.0" iphone 4        480x320   960x640    2x     960x640           326           3.5" iphone 3gs      480x320   480x320    1x     480x320           163           3.5" 

iphone resolutions

some people edge edge image (like banner on bottom left right edge of screen) iphone 6 plus prepare back@3x.png width 1242 , iphone 6 back@2x.png width 750 match iphone 6 screen size not think idea because 1242 / 3 = 414 , 750 / 2 = 375 naming them @2x , @3x not have sense. , width should have back.png - 375 or 414?

graphics names using @2x , @3x suffixes if example image@3x.png has 30x30 resolution logically thinking image@2x.png should have 20x20 resolution , image.png should 10x10. means if want have sharp full width image each screen should create back@3x.png width 414*3=1242px, back@2x.png width 414*2=828px , back.png width 414px. means on every iphone except iphone 6 plus need setup uiimages use example aspect fit content mode , scalled down again not perferct solution , slow down application if use lot of scalling on older devices.

so think best solution solve problem?

you don't have have each image in scales if won't used. make sizes need , name them according width. portrait full-device-width images, need 320px wide @ 1x , 2x, 375px wide @ 2x , 414px wide @ 3x.

4" devices used "-568h" suffix naming launch images, i'd recommend similar naming scheme:

  • imagename-320w (@1x & @2x)
  • imagename-375w (@2x)
  • imagename-414w (@3x)

then figure out image need @ runtime:

nsnumber *screenwidth = @([uiscreen mainscreen].bounds.size.width); nsstring *imagename = [nsstring stringwithformat:@"name-%@w", screenwidth]; uiimage *image = [uiimage imagenamed:imagename]; 

this might break if other widths added in future, far apple has required rebuilding app support new displays guess it's safe assume continue doing that.


Comments

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -