CSS Image Sprites: How to Create CSS Sprites for Blog Icons, Web Site Icon
Summary:
Learn how to use CSS sprites to improve performance for our busy website pages. CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.
What is Image Sprites?
CSS sprites group multiple images into one composite image and display them using CSS background positioning. You can save a significant amount of HTTP requests by consolidating your images into one or more composite sprites and using CSS to selectively display parts of the sprite within your web page. Now that the major browsers have evolved enough to support CSS backgrounds and positioning, more sites are adopting this performance technique. In fact, some of the busiest sites on the Web use CSS sprites to save HTTP requests. In this article we’ll expand on our mini-CSS sprite example to show how to use CSS sprites to improve performance.
How to make CSS Sprite
The idea behind CSS sprites is to consolidate multiple images into one sprite and then selectively display portions of this sprite with positioning. The steps are as follows:
- Combine multiple images together (usually icons or decorative images) into one image.
- Evenly space these images, aligned into one or more lines
- Set this sprite to the background image of an element (usually a list)
- Position the sprite to display the appropriate image by shifting the X or Y position by a multiple of the spacing
- Enjoy the increased speed and reduced HTTP requests
The above fig shows the best example for CSS sprites from aol.com. The narrow sprite image has been used to achieve the web page.
These are the CSS classes used to display the sprite image in corresponding position.
.dirmod .pi_Comments {padding-left: 2em;background: url(../../common/i/icons_19x14.gif) no-repeat 2px -747px}
.prod_ser .pi_Comments {padding-left: 2em;background: url(../../common/i/icons_19x14.gif) no-repeat 2px -747px}
. dirmod .pi_Filed {padding-left: 2em;background: url(../../common/i/icons_19x14.gif) no-repeat 2px -777px}
.prod_ser .pi_Filed {padding-left: 2em;background: url(../../common/i/icons_19x14.gif) no-repeat 2px -777px}
.dirmod .pi_RSS {padding-left: 2em;background: url(../../common/i/icons_19x14.gif) no-repeat 1px -806px}
Conclusion
So far we have been learned how to use CSS sprites to improve performance for our busy website pages. CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. Another benefit of CSS sprites is that the combined image is often smaller in file size than the individual images, despite adding white space between images. The smaller size of sprites is due to the reduced overhead of multiple color tables and formatting information required by separate images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.
