CSS Sprites

0 , , , Permalink

Instead of having a number of small images, it’s more efficient to have one page that holds all your images. By doing this, there is only one HTTP-request, increasing your page load time. But note, sprites are most often created for single blocks of graphics and not so much for repeating graphics. A good use for a sprite are icons, or buttons that have an active and default state.

The possible argument for not creating a sprite sheet is that it does take a little bit of work. Precision is required to line up all your images on a single sheet. But I just discovered this great service that creates the sprites for you, based on the background images already on your site. Check out SpriteMe. What makes it really cool:

  1. finds background images
  2. groups images into sprites
  3. generates the sprite
  4. injects the sprite into the current page
  5. recomputes the CSS background-position

But don’t take my word for it. Check out their demo yourself.

Comments are closed.