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

Answer 1

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 2

It's trivial:

1. Only include @2x images in your project.
2. 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 3

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 4

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 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

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