Image Resolution for iOS Apps

Image Resolution for iOS Apps
There seems to be a lot of confusion about the correct resolution to use when creating graphics for an iOS project such as an iPad app. One of the reasons for this confusion is that AppleR devices use points instead of pixels (see article link below). Another reason is the .png image file, which is the type of image file used for iOS devices.

Let's do a little experiment to see just what happens when we save our PhotoshopR image as a .png file.

1. Create a new image in Photoshop which is 1024 px x 768 px and 300 dpi and fill it with any solid color or pattern.

2. Save this image in the native Photoshop .psd format. (File - Save As)

3. Save the image again as a .png. (File - Save for Web and Devices)

4. Close the image window.

5. Now, go to the folder where you saved the files and open both the .psd and .png files into Photoshop.

6. For the .psd image, click Image - Image Size and note that the dimensions and resolution have not been changed.

7. Check the image size of the .png file.

As you can see, when we converted the Photoshop file into a .png file, the resolution was converted to 72 dpi. So what does this tell us about creating graphics that will be converted to .png files for an iOS application?

When working on an iOS app project, you will want to use the pixels dimensions of the iOS device(s) as your guide and disregard the resolution. As you can see, each Apple device has its own pixel dimensions.

iPad: 1024 pixels x 768 pixels x 132 resolution
iPhone 4: 960 pixels x 640 pixels x 326 resolution
iPhone 3G: 480 pixels x 320 pixels x 163 resolution

Personally, I hate to do things more than once and that includes creating digital art. When I'm creating art for an iOS app, it's always in the back of my mind that my client may decide to use these same images for a similar print project. So, I work in 300 dpi and save my artwork in the Photoshop .psd format. When working on the client's iOS app, I save them again in the .png format, but I still have the originals which I also give to my client.

Apple, Motion, iBooks Author, GarageBand, TextEdit, Pages, iMovie and Mac are trademarks of Apple Inc., registered in the U.S. and other countries.
BellaOnline is an independent publication and has not been authorized, sponsored, or otherwise approved by Apple Inc. Screenshots used by permission.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.