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 “image@2x.png”. 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?
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 🙂