[AI] Tech Dose of the Day: CSS Sprites

vishnu ramchandani vishnuhappy at yahoo.com
Fri Feb 22 02:16:32 EST 2008

CSS Sprites
contributor : Arun Daniel (from MphasiS Software
What are CSS Sprites?
CSS sprites are a way to reduce the number of HTTP
requests made for image resources referenced by your
site. Images are combined into one larger image at
defined X and Y coordinates. Having assigned this
generated image to relevant page elements the
background-position CSS property can then be used to
shift the visible area to the required component
image. This technique can be very effective for
improving site performance, particularly in situations
where many small images, such as menu icons, are used.
Further Info:
Back in the day, everybody and their brothers were
“slicing” images to make pages load faster. All that
technique did was fool the eye to make it look like
the page was loading faster by loading bits and pieces
all over at once.
Each one of those images is a separate HTTP-Request,
and the more of those, the less efficient the page is.
Then there’s file size. The natural tendency is to
assume that a full double-sized image must be heavier
than a similar set of sliced images, since the overall
image area will usually be larger. All image formats
have a certain amount of overhead though (which is why
a 1px by 1px white GIF saves to around 50 bytes), and
the more slices you have, the more quickly that
overhead adds up. Plus, one master image requires only
a single color table when using a GIF, but each slice
would need its own. Preliminary tests suggest that all
this indicates smaller total file sizes for CSS
Sprites, or at the very least not appreciably larger
Further References 
CSS Sprites: Image Slicing’s Kiss of Death :
CSS Sprites: What They Are, Why They’re Cool, and How
To Use Them :

      Now you can chat without downloading messenger. Go to http://in.messenger.yahoo.com/webmessengerpromo.php

More information about the AccessIndia mailing list