iPhone: Splitting images into tiles for faster loading with ImageMagick

By Mike Lin

iPhone developers! I found an easy and automated way to cut an image up into tiles at different zoom scales for the purpose of UIScrollView image tiling as shown in Apple’s ScrollViewSuite sample code!

Just get imageMagick, a command line image editor you can get from MacPorts. I made a bash script to automatically resize and tile at 100%, 50% and 25% resolutions.

tile.sh:
#!/bin/bash
file=$1
function tile() {
convert $file -scale ${s}%x -crop 256x256 \
-set filename:tile "%[fx:page.x/256]_%[fx:page.y/256]" \
+repage +adjoin "${file%.*}_${s}_%[filename:tile].${file#*.}"
}
s=100
tile
s=50
tile
s=25
tile

If you run: tile.sh bigimage.jpg it’ll dump out 256×256 sized tiles called bigimage_100_0_0.jpg, bigimage_100_0_1.jpg etc for each tile at 100% scale, as well as bigimage_50_0_0.jpg et al at 50% scale etc.