A friend has a simple WordPress-based website that I set up for him a few year ago - and he likes to post a lot of images. For various reasons I have it hosted on my VPS in Australia, which only comes with 15GB of bandwidth, most likely because I got a crazy good deal on it.

The problem is, that isn’t much bandwidth. Each page of his site was previously using almost 10MB of bandwidth per view - which meant the 15GB was running out. I deduced the high usage in Firebug and noticed it was gasp from large images, some almost 1MB large. The images on the server are contained in subdirectories under a gallery folder - and I wanted to resize them. What I actually wanted to do was:

1. If the image was over 1024x900, resize it.
2. If the image size (bytes) was over X, lower the quality.

I ended up using ImageMagick, which is what first obviously came to mind for image manipulation. While there is likely a better way to resize all the images, this is what I came up with. Maybe somebody else will find it useful too.

for dir in /home/vhosts/website.com/html/wp-content/gallery/*
do
cd $dir
for filename in *.jpg
do
echo Filename: "$filename"
width=`identify -ping -format %w "$filename"`
height=`identify -ping -format %h "$filename"`
if [ $width -ge 1024 -a $height -ge 900 ]; then
convert "$filename" -resize "%80>" "$filename"
echo New Dimensions: $width x $height
fi
filesize=`stat -c%s "$filename"`
if [ $filesize -ge 414981 ]; then
convert "$filename" -quality 90 "$filename"
echo Old Filesize: $filesize
echo New Filesize: `stat -c%s "$filename"`
fi
done
done

Save it as “resize.sh” and run it with “bash resize.sh”. The output:

Filename: img_5364.jpg
Old Filesize: 950748
New Filesize: 331426
Filename: img_5366.jpg
Filename: img_5367.jpg
Filename: 1c10_1.jpg
Filename: 1.jpg
Filename: 2752_1.jpg
Filename: 42920014.jpg
New Dimensions: 1544 x 1024
Filename: 42920017.jpg
New Dimensions: 1544 x 1024

For one of my webapp projects I’m needing to layer two images. This isn’t a problem on my laptop – I just fire up GIMP, do some copy ’n pasting, and I’m done. However, since everything needs to be automated (scripted), and on a server – well, you get the point.
The great ImageMagick toolkit comes to the rescue. This is highly documented elsewhere, so I’m going to be brief.

Take this:

And add it to this:

I first tried to use the following technique:

convert bg.jpg -gravity center world.png -composite test.png

This generated a pretty picture, what I wanted. What I didn’t want was the fact that the picture was freaking 1.5 megs large, not to mention the resources were a little high:

real    0m7.405s
user    0m7.064s
sys     0m0.112s

Next, I tried to just use composite.

composite -gravity center world.png bg.png output.png

Same results, although the resource usage was just a tad lower. So, what was I doing wrong? I explored a little and realized I was slightly being a muppet. I was using a bng background that was 1.2 megs large (long story). I further changed the compose type to “atop,” as that is what appeared to have the lowest resource usage. I modified things appropriately:

 composite -compose atop -gravity center world.png bg.jpg output.jpg

This also yielded an acceptable resource usage.

The result: