CSS Sprites---Reduce the number of HTTP requests to build high-performance websites

Referring to CSS sprites had to say something similar to the image Maps:

Image Maps

The picture to be referenced in a page is integrated into a single picture file, sorted in order, and then cut out of the link area inside. This does not change the demand style for the entire picture group, but reduces the number of HTTP requests to the picture.
Figure 1-1 shows a navigation bar with five images, each of which corresponds to a separate hyperlink. Our routine, of course, is to do five pictures, and then make a link for each picture, but to be more efficient, we have five separate images into an image map, so from the five HTTP requests, it becomes an HTTP request, the corresponding response time will become faster.

You can try one of the two links below to see how the image maps are different in speed.

No Image Map
http://stevesouders.com/hpws/imagemap-no.php
Image Map
http://stevesouders.com/hpws/imagemap.php

If using IE6 in a DSL (~900kbps) network environment, the navigation bar composed of image map is faster 56% (354ms 799ms) than the navigation bar composed of a separate picture file. This is because image map reduces four HTTP requests.

The most common implementation of image map is to use the HTML map tag to divide the large picture into one small block and set its different links. As follows:


<map name= "Map1" >
<area shape= "rect" coords= "0,0,31,31" href= "http://7career.org/home.html" title= "Home" >
<area shape= "rect" coords= "36,0,66,31" href= "http://7career.org/gifts.html" title= "Gifts" >
<area shape= "rect" coords= "71,0,101,31" href= "http://7career.org/cart.html" title= "cart" >
<area shape= "rect" coords= "106,0,136,31" href= "http://7career.org/settings.html" title= "Settings" >
<area shape= "rect" coords= "141,0,171,31" href= "http://7career.org/help.html" title= "Help" >
</map>

But the disadvantage is that you have to manually determine the coordinates of the image, which is tedious and error-prone, and it is only suitable for the picture to be combined in a rectangular area.

CSS Sprites (you can refer to the first page of YouTube and igoogle, which is how this optimization is used)
Like image maps, CSS Sprites is also a large picture of several small images, but the CSS sprites way is more flexible. In order to implement CSS Sprites, it is to make each small picture like a chessboard to compose a picture. For example: then through any element in the HTML that can support a background picture, such as <span> or <DIV>, and then use the Background-position property in the CSS to locate the position of a small picture in the large picture you want to display. As below, it is to use the "My" icon in the picture above to serve as the background of this div:

<div style= "Background-image:url (' a_lot_of_sprites.gif ');
Background-position: -260px-90px;
width:26px; height:24px; " >
</div>

I turn the example of image map in front of me into the form of CSS sprites: Put the five links in the navigation bar into a div named NavBar. Each link has a SPAN element that defines the background picture Spritebg.gif for the span element in the #navbar style, but each span has a different class to indicate the offset of the background picture that it specifically displays, taking advantage of the CSS The Background-position property.

<style>
#navbar span {
   width:31px;
   height:31px;
   Display:inline;
   Float:left;
   Background-image:url (/images/spritebg.gif);
 }
. Home {background-position:0 0; margin-right:4px; margin-left:4px;}
. Gifts {background-position:-32px 0; margin-right:4px;}
. Cart {background-position:-64px 0; margin-right:4px;}
. Settings {background-position:-96px 0; margin-right:4px;}
. Help {background-position:-128px 0; margin-right:0px;}
</style>

<div id= "NavBar" style= "Background-color: #F4F5EB; border:2px Ridge #333;
                                   width:180px; height:32px; padding:4px 0 4px 0; "
  <a href= "Javascript:alert (' home ')" ><span class= "Home" ></SPAN></A>
  <a href= "Javascript:alert (' Gifts ')" ><span class= "Gifts" ></SPAN></A>
  <a href= "Javascript:alert (' cart ')" ><span class= "cart" ></SPAN></A>
  <a href= " Javascript:alert (' Settings ') "><span class=" Settings "></SPAN></A>
  <a href=" Javascript:alert (' Help ') "><span class=" Help "></SPAN></A>
</div>

This is faster than an example of how image map works: 342ms VS 354ms, but only a small difference in how they are implemented. But what's important is that this is 57% faster than using a single five-picture example.
CSS Sprites
http://stevesouders.com/hpws/sprites.php

As we can see, image map requires all images to be combined consecutively, and CSS sprites does not have this limitation. The pros and cons of CSS Sprites in Dave Shea's authoritative article "CSS Sprites:image slicing's Kiss of death" has been described in detail, but I've been from CSS Sprites has its advantages: it reduces HTTP requests and is more flexible than image maps. Another advantage I didn't think of was that it reduced the amount of data downloaded. Most people might think that a big picture of a collage is definitely bigger than the total size of this small picture, because it will have some space for small images. In fact, the big picture reduces the color tables and formatting information in the picture, and makes the big picture smaller than the actual size of a bunch of small pictures.

If your site has many background images, button images, navigation bar pictures, then you should use CSS sprites way to optimize your page. (You can refer to the homepage of YouTube and igoogle, which is the optimized way to use it)

There is also a fun example:

A cssplay on the website

The Streaker-just for fun animation is the perfect example
Http://www.cssplay.co.uk/menu/streaker

CSS Sprites---Reduce the number of HTTP requests to build high-performance websites