iOS app image size matrix for projects. Track your sizes using this tool.

Posted on by

This is for a personal project a friend and I are doing – there are soooo many iterations of graphics that we need because we want things to look crisp. The intent for the table below to be copy& pasted and a column exists next to each resolution for a check mark to put beside each completed task. Keeping track of all this was almost a nightmare – I know this is specific to our project, but I trust this is useful for you too – copy and paste away.

Please see naming conventions for this project at the end of this article.

Rotation iPhone 3″ iPhone Retina 3″ iPhone 5 (4″) iPad/ Mini * iPadRetina*
Cover Portrait Lscp 90 deg R 480×320 960×640 640×1156 768 x 1004 1536 x 2008
Cover LandScape landscape 1024 x 748 2048 x 1496
Guts/Main Page landscape 480×320 980×640 1136×640 1024×768 2048×1536
buttons/segmented Controls landscape 52 x 44 104 x 88 104 x 88 52 x 44 104 x 88
default camera image landscape same as guts same as guts same as guts same as guts same as guts
ring and check image 300 x 300 300 x 300 300 x 300 300 x 300 300 x 300
appIcon 72 x 72px 144 x 144px 144 x 144px 72 x 72px 144 x 144px
iTunesArtwork n/a 512 x 512 1024 x 1024 1024 x 1024 512 x 512 1024 x 1024
iPhone: settings/spotlight n/a 29 x 29 58 x 58
iPad: settings** n/a 29 x 29 58 x 58
iPad:spotlight n/a 50 x 50 100 x100

NOTE: iPads and iPhones do NOT have the same aspect ratios – so you graphics will be stretched and interpolated by the device’s software/hardware.

Links

Naming Conventions used in this project

All retina images MUST be names @2x at the end for this project. So myImage.png would be myImage@2x.png for this project. For the 4″ retina screen please put -568h@2x at the end.

iPad main page images “page05_ipad.png” and “page05_ipad@2x.png” seems to be close to what you have now.
iPad masks: “page05_ipad_Pic_Insert.png” and “page05_ipad_Pic_Insert@2x.png”

iPhone main pages: “page03_480x320.png”,”page03_480x320@2x.png” and “page03_480x320-568h@2x.png”

iPhone masks: “page03_pic_insert_480x320.png”, “page03_pic_insert_480x320@2x.png” and “page03_pic_insert_480x320-568h@2x.png”

Cover pages for this project should be named like you have done the others, but lets call it Cover WWWxHHH.png, Cover WWWxHHH@2x.png and Cover WWWxHHH-568@2x.png . Cover pages MUST be rotated 90 degrees Right (clockwise)

There are 2 folders that these are dumped in “SmallImages” (iPhone) and “LargeImages” (iPad)

Rotation iPhone 3″ iPhone Retina 3″ iPhone 5 (4″) iPad/ Mini * iPadRetina*
Cover Portrait Lscp 90 deg R Cover iPhone Cover iPhone@2x Cover iPhone-568h@2x Cover iPad90 Cover iPad90@2x
Cover LandScape landscape Cover iPad Cover iPad@2x
Guts/Main Page landscape page03_iPhone page03_iPhone@2x page03_iPhone-568h@2x page03_ipad page03_ipad@2x
Guts Masks page03_pic_insert_iPhone page03_pic_insert_iPhone@2x page03_pic_insert_iPhone-568h@2x page03_ipad_Pic_Insert page03_ipad_Pic_Insert@2x
last main Page
buttons/segmented Controls landscape
   – book book_icon book_icon@2x n/a n/a n/a
   – camera camera_icon 100 x 88 n/a n/a n/a
   – take pic 50 x 44 100 x 88 n/a n/a n/a
   – lock LockIconClosed LockIconClosed@2x n/a n/a n/a
   – correct incorrect_ipad incorrect_ipad@2x n/a n/a n/a
   – incorect incorrect_ipad incorrect_ipad@2x n/a n/a n/a
default camera image landscape Insert_Instructions_iphone Insert_Instructions_iphone@2x Insert_Instructions_iphone-568h@2x Insert_Instructions_ipad Insert_Instructions_ipad@2x
ring and check image correct_green_iphone correct_green_iphone@2x n/a n/a n/a
appIcon Icon.png Icon@2x.png n/a Icon-72.png Icon-72@2x.png
iTunesArtwork n/a iTunesArtwork iTunesArtwork@2x n/a n/a n/a
iPhone: settings/spotlight n/a Icon-Small.png Icon-Small@2x.png
iPad: settings** n/a Icon-Small.png Icon-Small@2x.png
iPad:spotlight n/a Icon-Small-50.png Icon-Small-50@2x.png
orange text means I don’t have a nice name yet
Put iPhone images in a directory called SmallImages and iPad images in a directory called LargeImages

Notes

* Copy/Paste from apple: For iPad launch images, do not include the status bar region. Create launch images of these sizes (most iPad apps should supply a launch image for each orientation)

** Apple trims off 1px (low res) or 2px (retina) on each side for drop shadow

NOTE: Mathematically – always reduce your graphics 50% or more – never resize up and never resize between 50% and 99%. There are mathematical reasons for this … it is called aliasing. Apple does a good job at re-rendering graphics, by why not do our designs with a little understanding while we are about it 🙂