CSS Sprites-reduces the number of HTTP requests to build a high-performance website

CSS Sprites-reduces the number of HTTP requests to build a high-performance website

When it comes to CSS Sprites, you have to talk about Image Maps similar to the following:

Image Maps

Integrate the images to be referenced in a page into a single image file, sort the files in order, and then split the links in the file. In this way, the style of the entire image group is not changed, but the number of http requests to the image is reduced.
Figure 1-1 shows a navigation bar consisting of five images. Each image corresponds to an independent hyperlink. Our general practice is to make five images and link each image. However, to be more efficient, we make five independent images into an image map, in this way, from five HTTP requests to an HTTP request, the response time will be faster.

You can try the two links below to see the differences in the speed of Image maps.

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

If you use IE6 in DSL (~ In a 900 Kbps network environment, the navigation bar composed of image map is 56% faster (354 ms than 799 ms) than the navigation bar composed of independent image files ). this is because image map reduces the number of HTTP requests.

The most common implementation of Image Map is to use HTML map tags to divide large images into small pieces and set different links. As follows:

However, 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 combining the images in a rectangular area.

CSS Sprites(You can refer to the homepage of YouTube and iGoogle. They use this optimization method)
Similar to image maps, CSS Sprites also combines several small images into a large image, but CSS Sprites is more flexible. In order to implement CSS Sprites, small pictures are combined into an image like a board. For example, you can use any element in HTML that supports background images, such as or, and use the background-position attribute in CSS to locate the position of a small image to be displayed. The following figure shows how to use the "My" icon in the image to act as the background of the following div:

Background-position:-260px-90px;
Width: 26px; height: 24px; ">

I converted the previous image map example into CSS Sprites: Put the five links in the navigation bar into a DIV named navbar. Each link has a spanelement that defines the background image spritebg.gif for the spanelement in the #navbarpattern. However, each SPAN has a different class to indicate the offset position of the specific displayed background image, which uses the background-position attribute in CSS.

Width: 180px; height: 32px; padding: 4px 0 4px 0; ">

This is faster than the image map method example: 342 ms VS 354 ms, but the implementation methods between them are only small differences. But what's important is that this is 57% faster than the example of using a single five images.
CSS Sprites
Http://stevesouders.com/hpws/sprites.php

We can see that the image map method requires that all images be consecutively combined, and CSS Sprites does not have this restriction. The advantages and disadvantages of CSS Sprites are described in detail in Dave Shea's authoritative article "CSS Sprites: Image Slicing's Kiss of Death, however, I have learned from CSS Sprites its advantages: it reduces HTTP requests and is more flexible than image maps. Another advantage that I did not expect is that it reduces the amount of data downloaded. Most people may think that a merged large image must be larger than the total size of this small image, because it has some small image intervals. On the contrary, large images reduce the color tables and format information in images, which makes the actual size of large images smaller than that of small images.

If your website has many background images, button images, and navigation bar images, you should use CSS Sprites to optimize your page. (You can refer to the homepage of YouTube and iGoogle. They use this optimization method)

Another interesting example:

A

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