Background images add a custom touch to websites, but also slow down initial site loading, as each image requires an HTTP request. Back in 2004, Dave Shea published a ground-breaking article called CSS Sprites: Image Slicing’s Kiss of Death, in which he described how to combine background images into a CSS “sprite.”
On the right you can see the sprites file we created for the navigation links on the American River website. This one 8.5kb image contains backgrounds for both active and idle states of the five main website sections.
Many developers embraced sprites, but others were put off by the complexity of creating sprites and computing the offsets needed to specify which image to use for which CSS class or idea. These days we have no more excuses — there is a constantly growing and improving collection of online tools to make sprite creation and use quick and easy.
Online sprite generators
The easiest of the online sprite generators is SpriteMe. Install it as a bookmarklet and navigate to the page whose images you want to combine. When you click the bookmarklet, it opens a dialogue that lets you choose which images you want included in one or more sprites images. The code is quick and clean.
To create a sprites file with CSS Sprite Generator, you just upload a zip file with all the images you want combined. Set a few options, click the button, and you have a sprites file plus CSS code.
Specify images for Canvas: CSS Sprites Generator with URLs one at a time or in a list, or upload image files one at a time. Set some options, and then all your images are displayed in a layout that you can manipulate until you’re satisfied. The site uses Canvas (HTML5) so it’s fun to play with.
SmartSprites is the Cadillac of sprite generators. It runs online, or you can download the source code for use on your local machine. With SmartSprites, you have detailed control over organization, location, padding, mattes and output formats. You can even use SmartSprites for repeated background images. The downside is that it’s more complex to use and arcane to learn, but if you need the control it could be worth the time and effort.
Online sprites assistant
If you want manual control for optimizing and compressing your sprites image file, but would love a little help computing the background-position offsets, give Sprite Cow a try. Upload your sprites image and use their fun and easy interface to locate your sprites and retrieve the code for each.