css sprites

the concept

I'm not going to explain the whole sprite concept in full, if you want to read more about it there's a solid article on A List Apart that's more than sufficient. Basically, what happens is you add multiple images in one big image file (called a sprite) and you only show the right image in the right place.

There are mainly two main reasons for using css sprites. The first and most important reason is to get rid of a very annoying graphical glitch. When you change a css background image on hover you might witness a quick glitch as the change of image is not instantaneously. This is due to the fact that the image is actually loaded on hover and can't be shown until it is fully present. Using a css sprite fixes this as the hover state is already included inside the sprite and thus loaded from the start.

A second reason for using sprites is that they are better for loading times compared to the separate images included into the sprite. There is of course a little overhead when loading the page for the first time, but that is countered by the fact that css sprites reduce the number of http requests. And so using sprites will often result in a positive effect on the loading times of your page.

If this sounds interesting, it definitely is. But then there's the part where you need to handle the sprites in css to show up in the right spot. That's where the fun ends.

making sprites behave

Sadly css is not really equipped to handle sprites well. Even though the idea is terrific css lacks the most basic methods for dealing with sprites, ie clipping the needed part from the image. In css you can only show and not show the entire image on a certain element. So all you can do is make sure the unneeded images in your sprites are hidden away by other elements or outside the container's viewport. Which is easier said than done.

Another issue with sprites is that they are hard to integrate into an "em" design as distances in sprites are always defined in pixels, never in ems. This makes it very hard to predict how big an area will be in pixels.

hiding unwanted parts

If we want to hide unwanted parts of our sprite there are not many options. The only case in which it works flawlessly is when the container has a fixed pixel height and width. In this case, knowing how to assemble your sprite is easy. Just make sure you reserve the maximum space needed in the design for each image in the sprite. Sadly, these cases are rare and most of the time you have no idea how large an area might become.

The second and most popular option is to make sprites that are large enough so the other sprite images won't show up. This leads to 2000x2000 images which are in fact not huge in size but are a downright bitch to manage. To each his own but I hate working like this. And even then, you are never sure that they will always hide the remaining images as designs might change and em designs are built to grow with font-sizes. So while this method does work in most cases, it is never fool proof and quite a mess to manage.

A final method is to hide the remaining sprite images outside the viewport. Sadly we are limited by the css background-position which only allows us to work in the upper left corner. Even though it is possible to set css background images in the bottom and right corners, there is no way to do the precision work using negative values to hide the other images in our sprite. So unless you need your sprite somewhere in the upper right corner, this method is pretty useless.

best setup

If you do want to use a sprite for the upper left corner the safest setup is the one described above. By using these simple css rules you can effectively hide the unused images in all situations. With a proper implementation of the css background property all four areas could've been used to increase the number of images put into one single sprite, sadly that's only a fantasy for now.

conclusion

The concept of css sprites is wonderful, sadly there is no good way of implementing them (yet). The next article will look at several (yet unsupported) methods that might aid us in the future to improve the implementation of sprites. After that I might reveal one additional method which is ugly as hell but does work in some cases. Not something I'd ever do so still considering whether I find it interesting enough to explain.