I have just developed an ipad 3 (retina) App with lots of images (http://doctorcastello.com/fruits/).
For each image I have included the normal resolution version and the @2x version, which makes the App very big.
I am wondering (for my next iPad3 App which will have even more images) why not only include retina images, although without the @2x extension, and tell Appcelerator to show the image at half the resolution. Instead of having:
test.png (600x600 pixels) + test@2xpg (1200x1200 pixels) = 50KB + 150 KB = 200 KB
test.png (1200x1200 pixels) = 150 KB (and tell Appcelerator to render the image at 600x600 px).
Advantages: app is smaller, less work (not resizing everything in Photoshop). Disadvantages: iPad 2 may run a bit slower (although not important for app with low memory needs).
Rendering Retina images will Take more Memory and CPU time. If you think of iPhone 3G which is Not that fast (anymore), Retina images would result in lagging / increasing load time.
I do this all the time.. and it works very well
As an aside this two tools help a lot in reducing the image sizes:
The answer to why, is that 50% of an image is not as clear as an image created to be 50% of the image size. Half of the information from the @2x image is thrown away during the resize in hardware. It might just be that the 50% of the pixels the hardware decides to discard, might be important to the look you are desiring.
To demonstrated\, take a 200x200 pixel image, run a gradient against it. Now resize it to 100x100 or even down to 50x50.
Now create a 100x100 image, run the same gradient against it and do the same for 50x50. Not that the look might be close, but not the same.
The best example is from Apple's iOS Human Interface Guidelines. Non-retina graphics are not just to be 50% less, but designed to look good at 50% of the size.
Think you can help? Login to answer this question!