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

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

52 x 44

104 x 88

default camera image

landscape

same as guts

ring and check image

300 x 300

appIcon

72 x 72px

144 x 144px

72 x 72px

144 x 144px

iTunesArtwork

n/a

512 x 512

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.

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

– camera

camera_icon

100 x 88

n/a

– take pic

50 x 44

100 x 88

n/a

– lock

LockIconClosed

LockIconClosed@2x

n/a

– correct

incorrect_ipad

incorrect_ipad@2x

n/a

– incorect

incorrect_ipad

incorrect_ipad@2x

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

appIcon

Icon.png

Icon@2x.png

n/a

Icon-72.png

Icon-72@2x.png

iTunesArtwork

n/a

iTunesArtwork

iTunesArtwork@2x

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 🙂

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