What are CSS sprites?

CSS sprites are a technique where a single large image is used to display multiple images or icons.
How is this possible?
As you may know, there are two ways to display an image in a website – by using the <img> tag, or by defining CSS background-image property for an HTML element (e.g. Div).
In CSS sprites, a single large image is defined as the background of multiple HTML elements, and a different background position is set for each of those elements (read the How section for more details)

Why to use CSS sprites?

Using CSS sprites will speed up your website loading time and thus improve performance and user experience.
Instead of loading 8 images (as you will see in the example below), you load a single large image that contains all 8 images. Therefore, there are 7 less HTTP-Requests and the page loads faster (the client computer sends less requests to the hosting server, which saves time).

How to use CSS sprites?

Take a look at the following menu for example:

The above single large image (width:548px and height:118px) combines 8 different icons (each of the icons – width:137px and height:59px).

Note: the dashed line is there to demonstrate the dimensions of each menu button (they are all equal in size). It is otherwise not needed.

The first row contains the menu items in normal state and the second row contains the menus as they should appear when mouse over (hover).
Here’s the HTML:

<ul id="mainNav">
    <li><a href="/home.php" id="home"></a></li>
    <li><a href="/about.php" id="about"></a></li>
    <li><a href="/forums.php" id="forums"></a></li>
    <li><a href="/contact.php" id="contact"></a></li>
</ul>

And here is the CSS:

Explanation:
Lines 1 and 2 apply to all menu links.
Line one assigns the large image as background to all menu items, and line 2 defines their width and height (important).

Now come the lines that define background positions to each of the menu items. Note that the starting point of the background position is the upper left corner.
Line 3 relates to the upper home icon and is in fact dispensable because background position of 0 is the default.
Line 4 relates to the bottom home icon and counts 59px down from the start point (upper left corner).
Line 5 relates to the upper about icon and counts 0px down and 137px to the right from the start point. And so on.

Another option is using CSS sprites generator such as this one.
However, in many cases doing the manual work is quicker and more accurate than working with these generators. In addition, most of them won’t support 2 rows as in the menu example above.

When to use CSS sprites

CSS sprites can be used for any image that does not repeat in a website.
It is recommended to use it for elements that are used commonly in your site and not for elements that appear in a single page.
The example above is a classic use of CSS sprites, but there are other uses.
Here’s one example:
The tag cloud bellow should expand whenever new tags are added.

tag cloud

In this post I included the HTML and CSS for the background of the above tag cloud.
However, the CSS can be done even better – the top and the bottom of that box do not repeat (unlike the middle background that does repeat vertically).
Therefore, the top and bottom background can be combined into one image and implement CSS sprites (see the image below).

Another example is website layouts. In my previous design for WebTechWise I combined the header and footer to one large image:

The content area in the middle, had the following background that repeated vertically:

The downside of CSS sprites is the lack of search engine friendly attributes. You cannot use the alt and title attributes for CSS backgrounds as you do for HTML <img> tags.
Therefore, some web developers prefer avoiding sprites and having one more HTTP request, as long as the search engines can relate to it.
However, this is more a matter of preference than a consensus.

Do you use CSS sprites in your website? For which elements? Do you use CSS sprite generators?

Additional resources

Topics:   | |