As far as including a number of images in your sites is concerned, many designers and developers bundle their images into a single image file and use CSS to place them. This is called CSS spriting.
When you’re working on a project with a number of images, it’s nice to be able to automate the creation of sprites. Unfortunately, GUI tools have a reputation of being fragile (for a variety of reasons).
As such, there’s always the command line option.
Stoyan Stefanov has a great tutorial on using the command line and ImageMagick to create CSS sprites. His article covers:
- Creating the image
- Positioning via CSS
- Combining (or smushing) it all to JSON
Good stuff!
Michael says
HA, I learned something new today… I never thought about using the command line for creating sprites.
Tom McFarlin says
It’s funny – PHP is solid on the command line and has some nice libraries available, but I think we’re so used to it running so much of the web that we forget about that.
But maybe that’s just me :).
Jon says
There is another cool technique that uses data URIs instead of sprites. This way you don’t have to mess with all the background-position junk. Only for modern browsers and IE8 though:
http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/
Tom McFarlin says
Nice – that’s slick.