CSS Sprites, What is it and How to use it?


You’ve probably heard about CSS sprites, but do you know what they really are and why you should use them?

A simple answer is that a CSS sprite is a composition of multiple smaller images into one large image. See the examples below for further understanding.

It might sound a little counterproductive to create a larger image, because it might take longer to download it right? Well, that’s not exactly true. Please read this article to understand this concept in detail.

CSS sprites are mostly used in navigation bars and for strategically hiding some part of the image for web design. This is a storytelling technique being used in web design.

CSS Sprites – How They Works


Image Courtesy: Image Shack

Whenever a user comes to your site, the browser has to load each and single one of the images, unless they are already downloaded. Each of those images will take some time to download (regardless of its size) because of the internet connection latency.

If you’re sitting on a low latency network, say 50ms, and the web page has 20 images and other external files, it will take a minimum of 20*50*2 = 2 seconds of additional time to load the page, not counting the image size.

Most browsers are capable of downloading multiple resources at a time. The maximum number is different for every browser, but it is somewhere between 2 and 8 connections, so at best the 2 seconds get reduced to 1/8 of the time, which is 1/4 of a second.

That’s not much, but when you include the download speed, it goes up to at least half a second. Now think about all the server optimization you’re doing on the server side to reduce the page generation time from 50 to 20ms, and here you can save half a second on something really simple.

You’d think 20 images is a lot, but is it really? Think about a simple button with hover effect. That’s two images. Does it have “visited” state when you’ve already clicked it? Make it three, or sometimes even four.


How to Use it

This is an example of CSS Sprite for the login button here on Designzzz:

Both the hover and normal states are in one image. When the user puts his mouse over the button, all that happens is that the position of the background changes instead of the image itself.

.login-pad {
    background: url("http://www.designzzz.com/new_menu/button.png") no-repeat top center;

.login-pad:hover {
    background-position: bottom center;

That’s all you need to do, it wasn’t that hard right?

Another important thing to note is that JavaScript and CSS files suffer from the same issue. Regardless of their size, the browser has to download them separately, i. e. there is one additional request for each file you have on your page.

It is not uncommon to have 50 or more external resources on a page. This is why most websites are loading slowly, not because they are large, but because they have too many external resources and high latency connection.

Most of the shared hosting companies don’t provide high speed connection, so you can expect something like 150-250ms latency. Now let’s calculate that … 50 * 250ms = 12.5 seconds. Scary, isn’t it?


What I’m trying to point out here is that many people focus on optimizing the wrong thing. You might spend days or even weeks trying to figure out how to make your script run faster from 100ms to 50ms, but you miss the point that the website is slow because it keeps on loading 50 different resources.

Below are some examples for your inspiration to see how the major companies of internet are using this technique.



Example of CSS


CSS Sprite Tutorial

Dragon Interactive

CSS Tutorial and Tips

Further Related Readings

  1. SumarliĆ°i Einar DaĆ°ason April 16, 2011 at 11:38 am

    Good article and argument.

  2. Unknown April 18, 2011 at 6:54 pm

    In my opinion, it should have been like this.

    CSS sprites == plural; title should have been “CSS Sprites, what are they and how do (I/we) use them?”

    1. Tayyab April 19, 2011 at 5:54 am

      The previous commentator does has a valid point but here in this article, CSS Sprites is taken as a technique, that’s why it is treated as a singular. Title is like this “(The Technique of) CSS Sprites, What is it and how to use it”

  3. chukked April 18, 2011 at 10:17 pm

    good article, thanks for sharing knowledge

  4. avn.rocky April 20, 2011 at 1:11 am

    Thanks for such a nice article :) – Avn

  5. Kunal September 1, 2011 at 8:56 am

    It was good and I got to know few good things.
    I have also created a CSS sprite for my site at: http://kunals.com. Here, you can see an image on top left..here I have used this CSS sprite as painting.

    One can move cursor over this image and it will turn into colored picture.

  6. Chij Gurung November 26, 2011 at 10:51 pm

    interesting article about CSS Sprites thanks for sharing

Comments are closed.

Copyrights © 2015 - Designzzz. All Rights Reserved