CSS Sprites: A Few Basic Examples

March 27th, 2013 Leave a comment
Like the article?
css sprites

If you have a basic grasp of Cascading Style Sheets (CSS) and web design, then CSS sprites are an excellent addition to your skill-set.

What are CSS sprites?

CSS sprites are more of a technique than they are an object. The ‘sprite’ itself is a regular .gif, .jpeg, or .png image consisting of a number of images that you wish to display on a webpage – usually logos or small icons. Using the CSS sprite technique, you can determine which portion of the image will display in any given location on a page.

Why ‘sprites’?

Sprites as a concept come from the early days of video-gaming, when memory was limited but game designers still needed to keep speeds high. The limitations of consoles and PCs of the time required them to minimize the graphical complexity of games, so developers would combine all of the small images needed to create the environment into a single grid. This allowed them to simply display relevant portions of the image where appropriate while hiding the rest from view. As a result, the system only ever had to deal with loading a single image instead of attempting to tackle a complex array of graphics.

These days, CSS sprites use a very similar technique, just applied to a webpage rather than a game!

What are CSS sprites useful for?

Using CSS sprites, you can:

  • Reduce page loading-times by allowing the browser to load a single image rather than multiple ones
  • Reduce or eliminate issues with rollover effects
  • Reduce the number of images that you have taking up space on your server

A few basic examples of CSS sprites

Rollover buttons: One of the most common uses of CSS sprites is for creating rollover buttons. Rather than having separate images for different states, all of the buttons are simply uploaded as a single file. Take a look at the example below from Ask.com:

ask com sprites

You can see that the blue ‘search’ button has two different forms: one for when the cursor hovers over it, and one for when it’s in a neutral state.

Not only does this reduce the loading time for a page, it can also help to reduce any unwanted issues with your rollover images. As the entire image has already been loaded, the transition between the two images will be seamless. Using this technique, you can avoid the dreaded ‘flicker’ effect that can occur if browsers only try to load a rollover image when the user is interacting with the button.

Icon sets: This is another common use for CSS sprites, for many of the same reasons as discussed above. Since icon sets often require many small, separate images, it can be more practical to combine them into a single sheet. Have a look at an icon sprite from Google Reader below:

Google Reader sprites

Are there any disadvantages to using CSS sprites?

Lots of designers avoid using CSS sprites, as they can cause a few issues such as:

  • Increasing CSS complexity for the programmer
  • Increasing the amount of time spent on design, as icons and buttons have to be combined into a sprite sheet
  • Requiring a re-upload of the entire sprite image if a single element has to be added or removed

Where can I read more about adding CSS sprites to my own code?

There are lots of fantastic guides to creating CSS sprites available online. Check out just a few of them below:

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!