Easy way of exporting @2x images for retina display?
I am creating a lot of webviews that must be compatible with both the iPhone 4 retina display and pre-iPhone 4 devices. It's painstaking to export multiple files for each image.
Is there a script or utility to automate this process?
Answer
If you're using Photoshop to process your artwork you just need to record an action while resizing an image to 50% of its original width and height. Using the image processor (Files > Scripts > Image Processor) you can then run the action on all images stored in a folder you specify. The images will be stored to a new location, so renaming them is easy.
Keep in mind however that resizing images (even if the new resolution is smaller than the old one) may render sharp and graphic content blurry sometimes. If your artwork is mostly graphical in nature and has been created in Adobe Illustrator (or a similar application) you should export the different resolutions right there.
Also keep in mind that the larger resolution images should be easy to resize to half the original width and height - you should be able do divide both values by two.
Imagine an image of 13 x 13 pixels (at @2x resolution), which will be scaled down to 6 x 6 or 7 x 7 pixels. You design your interface using the smaller size. For displaying the high resolution image, the iPhone will double the smaller images bounds, which would result in 12 x 12 or 14 x 14 pixels. The @2x image wouldn't fit precisely anymore - so there's either clipping, glitches at the edges or the image is slightly blurred because it needs to be stretched or pinched to fit in.
Finally, if you don't use Photoshop, here's two freeware tools that allow batch resizing of images too:
Fotosizer
Irfanview