Speed How to use CSS sprites

Imagine you have six images being used by your main webpage design and the browser has to download them individually. If they were combined into just one image, you could reduce the page speed dramatically. This reduces the round trips required to display your page, making your site faster.

Instead of downloading six images, your webpage would now only have to download one.
This is the beauty of CSS sprites. One resource, but several uses.
Most webpages use several small images in their design. Background images, corner images, icons, menu items, etc. These tiny images really add up when you look at it from the standpoint of page speed.

Each and every image must be downloaded, which means the web browser has to ask the server for it, the server has to send it, and then the browser has to display it. If this were only happening with one or two images, it would be fine, but as more and more images are being loaded, the worse it is for your page speed.
The solution for this scenario is called image sprites, which combine several small images into one image so that the web page can display significantly faster.

How to combine images into CSS sprites

There are two main steps to take when creating CSS sprites. First you must make the image and second you must position the image.

Combining images

We will use a simple example here. Let's say we have two images we want to display on a webpage for style purposes and wish to combine them into one. We must know the size of the images in order to create the sprite. We will use an example where both images are the same size (50 pixels by 50 pixels).

To combine these images we would create an image that was 100 pixels by 50 pixels. We must call this image something, let's call it "sprite.png". Now that we have a combined image, we can use what we know about the image to display it correctly on our web page.

The combined image has a width of 50 pixels and a height of 100 pixels. As such we could say that the first image (the megaphone) resides in the top 50 pixels of the new image, and that the second image (smiley face) resides in the bottom 50 pixels of the image. We can use this knowledge to position our images correctly on our page. In essence, we will display the top half of the image when we want the megaphone and the bottom half of the image when we want the smiley face. This is how we go about doing that...

Positioning the images on the page

For this example will we use the images as background images in divs. This means that we will create empty div tags in our HTML to display images. if we wanted the megaphone image to show up somewhere on our page we could create a CSS div class of "megaphone"...

The above CSS code is saying the width and height of the megaphone image (50px by 50px) it is also calling the image "sprite.png" which is our combined image. Finally it is saying the "0 0px" part, which is how the sprite works. By telling the image to start at "0 0px" it is saying that the image should be displayed from 0 pixels X and 0 pixels Y. Dont let this scare you or bring up bad algebra homework nightmares. It is really saying "start the image at the top" and "start the image at the left".
Since we defined the width and height of the image in the CSS, the image will only display 50 pixels down the image (where the megaphone is) and will stop, thereby not displaying the smiley face at all. Now let's do the smiley face and see how that changes our code. We will create a CSS class called "smile"...

Note that we are still stating the same width and height, we are still calling the same image, but what we have changed is the "0 -50px" part. This is because we are now telling the image to start somewhere else. specifically, we are stating that the image should start 50 pixels down (-50px). This is because the smiley face image does not start until the bottom half of the combined image, 50 pixels down from the top.
Now that the CSS is done we can just call a div in our HTML wherever we want the images to show up. Where we want a megaphone we just enter an empty div called "megaphone"

When we want the smiley face we enter a div called "smile"

That is the basics of combining images into CSS sprites, but there are many ways to do it and it is worth exploring what is best for your pages. The above tutorial was just to generally display how sprites work and is by no means an in depth discussion of them.