CSS Image-Sprites

CSS image-sprites are a way of showing many different images to a viewer of your webpage by using a single image as a resource. The idea of using CSS to utilize these sprites came about long after the image-sprite concept had been around.

The image-sprite was originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. However, as computer performance improved, this optimization became unnecessary, and the term evolved to refer specifically to the two dimensional images themselves that were integrated into a scene.^[1]

CSS image-sprites borrow from the original concept. However, the main reason for using them is to reduce the number of HTTP requests for images referenced by a Webpage. Here's one process for creating an image-sprite in a nutshell:

• Combine multiple images into a single larger image, with each sub-image at a specific grid-coordinate.
• Use the single, combined-image to give a series of A elements a base background-image.
• Then specify background-positions for each of the A elements via the pseudo-style, a:hover.

Accessible Image-Sprite Example

The many CSS image-sprite examples I've found on the Internet do not appear to be very user-friendly with respect to Web Accessibilty guidelines. Sure, they all seemed to please search engines by adding link-text, but most of the examples set the display-property of the link-text containers to display: none. This can cause issues for folks that choose to reconfigure browser image and/or color settings to make Webpages easier for them to read.

The following CSS image-sprite example allows for the link-text to stay visible, no matter what settings the user might have changed with repect to showing inline and/or background images. Even when images and/or colors are turned-off, these hyperlinks will still appear, allowing the link functionality to remain intact.

If you happen to be using Firefox, open Tools/Options and click on the 'Content' tab, and click again on the 'Colors' button. Then uncheck the 'Allow pages to choose their own colors' checkbox. Click OK. Doing this will similarly turn-off images on your Webpages.