Css optimization

Question

I noticed that digg.com and google.com use some css optimization in their gif header image. for example, digg uses this image http://digg.com/img/menu-current.gif .

Can someone let me know why they use this method and how to do it on my own site?

Answer 1

CSS Sprites: Gluing Images Kiss of Death:
A List Apart

• Another article in Smashing Magazine
• Hacking support for IE6

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

Answer 2

CSS-. .

: http://www.alistapart.com/articles/sprites/

Answer 3

css sprite

Answer 4

, ( ); , CSS , () .

, .

, @A List Apart.

Answer 5

They use this technique, so a single image is loaded, not a browser, which makes many different connections for downloading multiple images.

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

The links that others post while I write probably have good methods for cropping images.