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 [e-mail] 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.