hello guys,
I noticed that digg.com and google.com are using kind of css optimization in their gif header image. for example digg uses this image http://digg.com/img/menu-current.gif .
can any one give me an idea why they are using this technique and how to do it in my own site?
regards,
CSS Sprites: Image Slicing’s Kiss of Death:
A List Apart
The purpose of this technique is to reduce HTTP-requests by combining all images.
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/
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.
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.
