CSS Sprites
From Wiki.TheWomo
Contents |
The Problem
Most of your visitors time in loading a site is spent on downloading the various components of a page - images, stylesheets, javascript, flash & so on. Each of these files require an additional HTTP request to be sent out. Cutting down the number of components reduces these requests and greatly increases the end user's experience. In cases such as stylesheets & javascripts, we normally merge multiple files and functions into one file. The same thing can be done with images, but they require a little more arranging & working.
The Solution
You can combine related images of a template into one large image grid(called a sprite) and display required sections using css. Websites such as Yahoo, AOL & Google greatly reduce server load using such image sprites. And yes, it does work perfectly with IE6 !
Using CSS Image Sprites
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them by CSSTricks
- CSS Sprites: Image Slicing’s Kiss of Death by A List Apart
- Another quick example of Creating & Using CSS Sprites
An example of our design team using CSS Sprites for the navigation bar on Ecomantra.com
If not for this sprite, the browser would need to load 24 different images!
Interesting
- Image sprites were used in Super Mario Bros (yes, the world of 8-bit awesomeness!)
- Must Read: Yahoo's Best Practices for Speeding Up Your Web Site
--Dayson 16:25, 4 May 2009 (UTC)
