This article stems from a conversation on web site efficiency and the different ways to approach building image buttons. Sprites are combinations of images integrated into one file displayed on your website. New techniques sprout up all the time, but sprites have been around in one fashion or another for a while now and they are proving their usefulness more and more. The use of sprites in web site design gives the same effect we are used to seeing when we mouse over a button on a website. Test it out below. Here are the imanes used in the file for this example.

In the web design world, there are always a handful (if not more) ways that you can accomplish any given task. In terms of web design and using images for buttons, there are even different ways of using multiple images for that mouse rollover effect. It started with having to use extra code and Javascript, a coding language that reacts to users' mouse movements. Another more browser-friendly way is using separate images that get displayed though a stylesheet that does pretty much the same thing without the extra code -- sprites.

Sprites as a method is unique in the way the images are prepared. An entire series of buttons with separate links can be prepared together saving your web site users’ browser from making multiple server requests for a folder full of images. This decreases load time increasing the efficiency of a web site. Every little bit helps. The counter argument is that loading 10 small image files to the web page is better than loading 1 file with the needed images. This is untrue. Page load times are quicker and image sizes are around 40% smaller and more easily accessible by browsers by using sprites.

As always, the main goal is to quickly provide valuable content to your visitors. This is a trick used by web designers to help speed up the process of providing information to your visitors by decreasing overall file size. These techniques aren't something everyone needs to know how to do but it's important for web designers to keep up to date with best practices. CSS Sprites are all the rage!

Here's the example (pictured above) in use. Pass your mouse over the image to see the second image, then click and hold to see the third image:

• Hover and Click above for an example!