Automatic resizing for 'non-retina' image versions - xcode

Question

I'm looking for a solution that can save me from maintaining two versions of the same image, one for Retina displays (aka #2x), one another for non-Retina displays. My goal is to maintain the "2x" images only, and have some 'magic tool' resize all of them with a single click or even better upon building in XCode. Like "set it and forget it".
Can you help me? Thanks in advance.

Answer 1

If you just want to downscale them, you can have Xcode automatically generate all non-retina images during the build process. This example script uses "sips" because that is preinstalled on Macs.
The Script
#!/bin/bash
# Downsamples all retina ...#2x.png images.
echo "Downsampling retina images..."
dir=$(pwd)
find "$dir" -name "*#2x.png" | while read image; do
outfile=$(dirname "$image")/$(basename "$image" #2x.png).png
if [ "$image" -nt "$outfile" ]; then
basename "$outfile"
width=$(sips -g "pixelWidth" "$image" | awk 'FNR>1 {print $2}')
height=$(sips -g "pixelHeight" "$image" | awk 'FNR>1 {print $2}')
sips -z $(($height / 2)) $(($width / 2)) "$image" --out "$outfile"
test "$outfile" -nt "$image" || exit 1
fi
done
Automatic Execution
Create a new "Aggregate Target", name it "Downsample images".
Add a "Run script" phase to this target that runs the script.
Add the "Downsample images" target as a "Target Dependency" in your app target(s).
Notes
Remember to still add your 1x images to the Xcode project. Depending on your needs you might also want to:
exclude certain files from conversion
add the generated files to your .gitignore file
use ImageMagick's "convert" instead of "sips". (sips seems to fail for some indexed PNGs.)
run optipng
ImageMagick comes with a "compare" command if you want to check the downsampled versions.

Answer 2

This is quite an old thread, but I stumbled onto it, so I can elaborate on maintaining more than one size automatically.
Performance-wise, I'm not sure using the automatic downscaling is a wise idea, as it has to be done in real-time, but it should work on simpler cases.
Now, to convert these #2ximages automatically, a simple bash script should do the trick. l4u's solution works, but for guys with simpler needs who do not want to install guard, this also works (you still need to install ImageMagick, though) :
for f in $(find . -name '*#2x.png'); do
echo "Converting $f..."
convert "$f" -resize '50%' "$(dirname $f)/$(basename -s '#2x.png' $f).png"
done

Answer 3

It's trivial:
Only include #2x images in your project.
Make sure those images have the #2x suffix.
The system will automatically downscale for non-retina devices.
The only exception is if you are doing manual, low level Core Graphics drawing. You need to adjust the scale if so. 99.9% though, you don't have to worry about this.

Answer 4

u can simply use only *#2x.png images for your app.
but you must set the content mode = UIViewContentModeAspectfit for the imageviews,
then it will automatically fix the image to the releventimageviews.

Answer 5

Or what you can also do is: Have only the #2x images in your app's bundle then on the first launch. Take all the #2x photos and downsize them by 1/2 and store them in the documents directory. Then when you need your photos for a UIImageView say, just grab them for the documents directory and set it to your UIImageView using code and not Interface Builder!
I was wondering this a few weeks ago too and I realized that this is pretty much the only way to really do what you are looking for!

Answer 6

I've created http://l4u.github.com/blog/2012/04/02/resizing-retina-images-with-guard-for-cocos2d-iphone-slash-cocos2d-x/ to generate non-hd images on the fly when -hd images are created/updated. It uses guard, guard-shell and imagemagick
You can replace -hd with #2x.

Answer 7

Try Resource Helper on the Mac App Store
http://itunes.apple.com/us/app/resourcehelper/id521474600
It costs $10.49 but it's worth it. Checks if your images are Retina friendly (i.e. even numbered width/height dimensions) and generates the corresponding image inline. Also handles creation of ~ipad and #2x~ipad graphics as needed.
EDIT: I am not affiliated with the authors of Resource Helper.

Answer 8

What I've been doing for our applications is asking our designer to export everything twice as big as it needs to be, then running a little node script to resize the images (anything named #2x in the directory where you run the script). Presently, we're just running the script when every time we deploy (it's idempotent), but it could easily be incorporated into forever -w or some other file-change-watching library like guard.

Answer 9

Old thread, but I found a use for #nschum's script - I noticed though that it doesn't round numbers for the #1x images if it's dividing an odd number. If I recall correctly this introduces a performance hit; wound up slightly revising it as below. Alters the awk call slightly to do the division there and round it accordingly, and won't re-create #1x images if one already exists (you might want to remove that, dunno).
At this point we've pretty much hit the point where non-retina isn't a big deal (the iPad 2 is all that remains...? The original Mini too, I guess), so meh. Throwing it up for posterity.
#!/bin/bash
# Downsamples all retina ...#2x.png images.
dir=$(pwd)
echo "Downsampling Retina images..."
find "$dir" -name "*#2x.png" | while read image; do
outfile=$(dirname "$image")/$(basename "$image" #2x.png).png
if [ "$image" -nt "$outfile" ] && [ ! -f "$outfile" ]; then
if [[ $(dirname "$image") =~ "Images.xcassets" ]]; then
echo "Skipping Image XCode Assets directory"
else
basename "$outfile"
width=$(sips -g "pixelWidth" "$image" | awk 'FNR>1 {printf "%.0f\n", $2/2}')
height=$(sips -g "pixelHeight" "$image" | awk 'FNR>1 {printf "%.0f\n", $2/2}')
sips -z "$height" "$width" "$image" --out "$outfile"
test "$outfile" -nt "$image" || exit 1
fi
fi
done
echo "Finished downsampling Retina images"