demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Sprites

css / sprites
Updated heart0 comment0

Estimated. reading time: 3 minutes, 19 seconds

A strongly graphical web page will usually feature most of its navigation as icons. There are several ways of creating those icons: looking for an appropriate Unicode symbol should be your first go-to, but if no symbol exists, you will usually have to create the icon in or another bitmap editor.

To add interactivity we have to swap the initial image with a second image, usually on mouse rollover. The simplest way to do that is to place the first image as a background, and on hover, swap it for a second. This technique is known as CSS Sprites.

Our first image, multimedia.png, looks like this:

This is our second image, multimedia-hover.png, with a glow effect:

(For a real website I would make the images significantly smaller and cropped far closer: here they are exaggerated for the purposes of illustration).

This is our basic HTML: 

<ul id=nav>
<li><a href=# id=multimedia></a></li>
<li><a href=# id=storage></a></li>
</ul>

To this, we add this CSS: 

ul#nav li { display: inline; }
a#multimedia { display: block; width: 171px; height: 123px;
background-image: url(multimedia.png); }
a#multimedia:hover { background-image: url(multimedia-hover.png); }

There are two conditions that must be met for CSS Sprites to work correctly:

  1. Both images must be exactly the same size.  Trying to swap images of different sizes will result in the apparent motion of the icons on mouseover, “jumping as they move between states. This takes careful design.

  2. The a tag must be given a height and width that exactly matches the size of the initial image. This means that the a tag must be set to display: block or inline-block, or be provided with enough padding to see through its window to view the background image.

  3. But wait! We can improve on this: if the window of the a element is only large enough to see one of the image states, why don’t we merge the images together, and show just one half or the other using background-position? By doing so, we load just one image, rather than two, and reduce the number of HTTP requests, which is one of the central techniques to speeding up the load time of a web page. We also eliminate the possibility of seeing a flash as the hover image is loaded for the first time.

    Our HTML is unchanged, but the CSS changes to this: 

    a#multimedia { display: block; width: 171px; height: 123px; background-image: url(multimedia.png); }
    a#multimedia:hover { background-position: bottom left; }
    JQuery UI CSS Sprite icon panel

    You can take this much further and create an entire panel of icons in a single image, shifting it around to show different icons for different links using background-position, significantly saving load time.

    CSS Sprites are a useful technique, but have several disadvantages that tend to keep me from using them in sites:

    1. If the images don’t load for any reason, your users are lost.  Unlike real images that use an <img> tag, background images do not have a text alternative. If they don’t load, nothing shows.

    2. Lack of alt text reduces semantics and . Search engines will still follow the link, but they won’t be able to able to understand its context, as there is no text within the link itself.

    3. Changes to the design can mean a lot of rework to an icon panel. Especially if the icons change in size (although this could be mitigated by using background-size).