1. Technology

CSS Sprites


1 of 7

What is a CSS Sprite?

A CSS sprite takes a large image and splits it into multiple smaller images for display. CSS sprites are useful because they allow you to store all your navigation and site maintenance buttons in one file. You simply reference that file with specific grid locations to display the image you want to display.

Why Use CSS Sprites

The main reason to use CSS sprites is that they can dramatically increase the speed of your website. When every image (and its rollover state) is stored in one image you can take advantage of caching immediately. When a Web browser downloads a sprite file, it is, in effect, downloading the entire image library for your site. So that then when you ask for one of those images to display, it's already in cache and displays very quickly.

CSS sprites also make it easier for you to manage your website navigation images. For example, if you have a grid of navigation images and your marketing department decides they want to do a special colored theme on the website all you need to edit is one image file. Change the color to the new theme and your site is updated.

Finally, CSS sprites let you see the before and after images for rollovers all in one place. And if you're careful, you'll be able to see immediately which images are missing rollovers or need improvements to their rollover states. Simply from looking at the master image.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. CSS
  5. Advanced CSS
  6. CSS Sprites - Create a Button Bar with CSS Sprites

©2014 About.com. All rights reserved.