HTML and CSS Reference
In-Depth Information
CSS sprites in the wild: Amazon, Google and Facebook.
Preparing e Sprite
If you look online for examples of CSS sprites, you'll see that most are
optimized for an ideal use of real estate—gaps between images are kept to
a minimum in order to keep the load of the entire sprite as low as possible.
This reduces loading time considerably when the image is first downloaded,
but it also introduces those horrible image coordinates that we mentioned
earlier. So, why not take a slightly di
"
erent approach? Let's look for an
easier way to target images while making sure the resulting sprite is not
substantially bigger than the sum of its individual images.
