Reducing the number of HTTP requests and the bandwidth used is and will continue to be a challenge as designers build ever more elaborate designs. One area where you can both reduce the number of requests and bandwidth is by combining styling images that creep into the design such as corner images, line images, gradients, backgrounds, and so forth. First, start with the basic uses for styling images, as shown in Figure 1.
Figure 1 Box with rounded corners
This simple box is a common use of styling images; however, it is expensive in terms of the number of requests. This example uses eight individual images (one for each corner and each line). Each of these eight images are show in Figure 2.
Figure 2: Eight images used to create the box
The yellow background is added to make it easier to searpate images. These images can be combined into a couple CSS sprite images; however, before you get there,you need to start with the CSS and see how it changes to use CSS sprites. Following is an exerpt from the CSS used to create the box in Figure 1.
.Top
{
background-image: url(TopLine.png);
height:10px;
width:100%;
background-repeat:repeat-x;
background-position:top center;
}
.TopLeft
{
float:left;
background-image: url(ULCorner.png);
width:10px;
height:10px;
background-position:top left;
}
Read the Rest of this Article at Developer.com