Is it better to supply new artwork or scale down large images to deal with the Retina display?

Question

The amazing display on the iPhone 4 has made us make higher resolution artwork to take advantage of the new screen.

My question is, what is the better way to apply the images? Currently, there are two methods to do so:

• Using two images: "image.png" and "[email protected]". The problem with this is that, if your app needs a lot of images, the size of the bundle increases considerably. Also, you have to scale the images and save them correctly which can take quite some time.

• Scaling the images. You load only the large image and then scale it to 50% in code or using Interface Builder. This reduces the bundle size and design time but may not look as good on small screens.

What method do you think is best and why?

Answer 1

It depends. Just never rescale a low-res image for a high-res display if possible.

For some things like icons, every pixel counts and you need both high and low res versions.

For others, like photographic images and backgrounds, down scaling is fine - if done correctly.

Answer 2

Take into account device memory as well. If you are loading double-size images on older devices (3G, 3GS), they may display scaled down (if you set the scale properties appropriately on their container views) but the larger image is still taking up twice as much memory as it needs to once loaded. As the number of images you work with increases, so does the amount of wasted RAM.

If you load just what is appropriate for the device running the application, you will see performance benefits in the long run.

Edit: I should note that this means my vote is for using two separate image files. If that wasn't clear :)

Answer 3

Bundle Size != Ram size as Wireless Designs states. Don't worry about Bundle size. If you're really concerned about supporting really old devices (like original iPod Touches) then release two versions of the app.

Otherwise, only load the images appropriate for the device at hand.

Answer 4

If running over the 20MB limit, definitely go with scaling the images in code. Bundle size does become important at that point. There will be many lost downloads if people cannot install your app on 3G.

Besides the 20MB rule, it is better to have separate images, but if you can't, rescale the UIImages programmatically into smaller UIImages, and then pack them into the UIImageView, but don't put a 100x100 UIImage into a 50x50 UIImageView. Rescaling the UIImage ends up looking best.

Answer 5

I have made an app with an about 100 images (for each version of display). The app is ultra universal (supports iPad, iPhone/iPod touch and iPhone 4's display). The bundle size does increase, but that is not the problem (in my app, the main part are the images and sounds - a sound for each image) and the size is less than 100 MB. It is a lot, but you see that it doen't grow that much out proportions. You should always put compatibility first.

And as someone said before, the size of your bundle doen't have any effect on the memory your app is using. If you don't want to use 2 versions of the images, don't bother scaling them up in code. They won't lok good on iPhone (pixelated) or iPhone 4 display (blurry). Trust me, I have experiences with it.