Automatic resizing for 'non-retina' image versions

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 [email protected] 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