Optimization on web page performance is a prime focus area of major importance when in it comes to cutting bandwidth costs and reducing download time. All attempts so far made were mainly concentrated in those techniques (C++, ASP, Database, JSP etc )that generate the HTML.
Performance analysis reports on some of the major websites showed that HTML took only 5%-38% of the total download time, while rest of the 62%-95% of the time is consumed in making Http requests and downloading various other components like images, style sheets, scripts etc.
This is exactly the same as the 80/20 rule coined by the famous economist of 1900’s Vilfredo Pareto. The rule states that 80% of the country’s wealth belonged to only 20% of its population. Similarly in software industry terms 80% of the consequences come from 20% of the causes.
Reducing HTML download time could only rectify 20% of the issues related to web page performance, while the rest 80% is unattended. To attain major enhancements in web page performance, the unattended 80% comprising mainly of images, style sheets, scripts etc has to be targeted. Quantitatively images exceed in numbers when compared to style sheets and scripts which may be 4-5 in numbers at the maximum per webpage.
Reducing the number of images used per web page increases the web page performance considerably, but that doesn’t mean that the websites must be developed purely using background colors and borders with no images.
CSS Sprites makes it possible by increasing web page performance while retaining the same images as such.
What are Sprites?
The Sprites technique has its base derived from those that were used in the old video games. To reduce the memory load the video game developers used to place all the small images and graphics in one common grid.
For an instance if a particular image needs to be shown, then only the portion of grid containing that particular image will be revealed while the rest of the grid will be masked. Thus instead of loading all the images individually, they are stitched together into one common grid and is loaded as a group once.
The same concept is used in web development, wherein images in a web page / multiple web pages are combined together to form a single large image. This large image is used as background image in those areas where individual images will be shown.
By using CSS background positioning only the needed part of the large image will be revealed while masking the rest of the image.
You can see live examples and all advantages in “All about CSS Sprites for Faster Web – part 2”
