CSS optimization

Question

I noticed that Digg and Google are using a kind of CSS optimization in their GIF header image. For example digg uses this image:

Why are they using this technique and how to do it in my own site?

Answer 1

CSS Sprites: Image Slicing’s Kiss of Death:
A List Apart

• Another article at Smashing Magazine
• A hack to support IE6

The purpose of this technique is to reduce HTTP-requests by combining all images.

Answer 2

These are called CSS sprites. They are used to reduce the number of server requests.

Check out this nice article about them: http://www.alistapart.com/articles/sprites/

Answer 3

It's called a css sprite

Answer 4

I believe these are called splices (or is it sprites); basically they load up the whole image one time and tell CSS to display only part of it, that way they avoid having to (pre)load lots and lots of images.

They add more responsiveness to the page, since consecutive images are loaded immediately.

As weichsel mentioned, check the article @ A List Apart.

Answer 5

They use that technique so one image is downloaded rather than the browser potentially making many different connections to download multiple images.

You can then "crop" the image as a CSS background-image using a combination of CSS properties like "background-position" and "width".

The the links the others are posting while I write this probably have good techniques to crop the images.