Building CSS sprites with Bash & Imagemagick
3/05/2010I’ve been rebuilding the Crooked Tongues forum and one of the things we’ve been mindful of is trying to stick to some good practises with regards optimzing the site for fast loading. One of the easy ways to decrease your page load times is to use CSS sprites. This is just stiching together all your common images into one big one and then using background positions & width/heights in CSS to offset and “crop” the big image. This way you only get the one HTTP request made to request it.
If you’ve got hundreds of small images it can really speed up your page. A prime candidate for sprites are typically your buttons, header images and in the case of a forum, emoticons. Crooked uses lots of custom designed icons and when writing them out as individual images for the post toolbar really slowed down the page. There was no chance I was going to do it manually so I turned to a stable of my web development toolset – Imagemagicks convert.
Convert can do a lot. I’ll show you two such ways it made my life easier and cut down on the time I had to spend doing grunt work. First, here’s how the toolbar looks:
I wrote some bash to basically loop over a folder of images and then using convert to pull the width & height info, I use that to write the CSS file. Finally I loop over the images once more using the append command to output one big, long image. (gist)
#!/bin/bash
# uses imagemagick to stich together all images in a folder and
# then writes a css file with the correct offsets along with a
# test html page for verification that its all good
if [ $# -gt 0 ]
then
if [ $3 ]
then
ext="."$3; # the extension to iterate over for input files
else
ext=".gif"; # the extension to iterate over for input files
fi
name=$1; # output will be placed in a folder named this
if [ $2 ]
then
classname=$2"-sprite";
else
classname=$1"-sprite";
fi
css="$name/$classname.css";
html="$name/test.html";
rm -fr $name;
mkdir $name;
touch $css $html;
echo "Generating sprite file...";
convert *$ext -append $name/$classname$ext;
echo "Sprite complete! - Creating css & test output...";
echo -e "<html>\n<head>\n\t<link rel=\"stylesheet\" href=\"`basename $css`\" />\n</head>\n<body>\n\t<h1>Sprite test page</h1>\n" >> $html
echo -e ".$classname {\n\tbackground:url('$classname$ext') no-repeat top left; display:inline-block;\n}" >> $css;
counter=0;
offset=0;
for file in *$ext
do
width=`identify -format "%[fx:w]" "$file"`;
height=`identify -format "%[fx:h]" "$file"`;
idname=`basename "$file" $ext`;
clean=${idname// /-}
echo ".$classname#$clean {" >> $css;
echo -e "\tbackground-position:0 -${offset}px;" >> $css;
echo -e "\twidth: ${width}px;" >> $css;
echo -e "\theight: ${height}px;\n}" >> $css;
echo -e "<a href=\"#\" class=\"$classname\" id=\"$clean\"></a>\n" >> $html;
let offset+=$height;
let counter+=1;
echo -e "\t#$counter done";
done
echo -e "<h2>Full sprite:</h2>\n<img src=\"$classname$ext\" />" >> $html;
echo -e "</body>\n</html>" >> $html;
echo -e "\nComplete! - $counter sprites created, css written & test page output. ~jaymz";
else
echo -e "There should be at least 1 argument!\n\tbuildSprite.sh output_folder classname input_extension"
fiThe script outputs the names incrementing by one, I’ve gone over myself and turned them into “nice” names. All in all its taken maybe 10 minutes to convert it all into a sprite and nice CSS file. If you were using a primary key field like 1, 2, 3… etc then you could probably fudge it to not even have to name the id’s “nicely”.
Imagemagicks convert can also do some modification of your files. It can for example convert your image to a black & white copy. It’s not a great deal of work to then loop over a set of images, create b&w versions in a temporary folder and then stitch the two versions together to get a color→b/w sprite for hovers. I’ve actually seen people do this manually and spend an age at it, with this method you output them once then sit back for the 30 seconds or so whilst the computer does the work.
for file in *.jpg; do convert -colorspace Gray $file bw/$file; done
for file in *.jpg; do convert $file bw/$file -append sprites/$file; done
It’s times like this that I am reminded of just how much time you can save with a little shell script and the right command line tools. Not everthing needs point & click.
