Development Using High Resolution Images For Retina Display

Here are some tips for retina display

  1. Since iPhone 4 uses points instead of pixels, the only thing you need to do is bake all the images to double resolution (For Example: 140 x 140 image should be blown up to 280 x 280)
  2. Rename all your high resolution images as {image_name}@2x.png

Here is a small shell script that will help you do that in a folder


#!/bin/bash
for i in *.png
do
	mv $i ${i%.*}@2x.png
done
  1. Add both low resolution and high resolution images to as resources to your project.
  2. Use the low resolution images as you normally do for any project
  3. iPhone will automatically detect if app being run on high resolution retina display and load the @2x image at runtime

SVN issue

If you use SVN for revision control, there would be problem with escaping under bash. Here is how you need to do it


svn add [email protected]@

Notice the @ sign at the end.

By: gavi on: