Mink Machine

CSS Sprites

CSS Sprites was first introduced in 2004 by Dave Shea in the article CSS Sprites: Image Slicing’s Kiss of Death. At least it was the first time I read about the technique.

The word “sprite” derives from the old 8-bit days where bitmaps were moved around the screen in games. They were called sprites and a common technique was to gather them all into a grid on a large image, where the code could pull out the desired one by their respective coordinates.

So instead if loading a lot of small images, we just load one big image. This will reduce the number of HTTP requests, which in turn improves page loading speed and may reduce undesired flickering effects.

CSS Sprites are used on many high-traffic sites today. For instance, have a look at the grid image used by Google:

How to implement this? The trick is clever use of the CSS property “background-position”. Have a look at this simple example markup:

<ul id=”nav”> <li><a class=”item1″ href=”#”>Item 1</a></li> <li><a class=”item2″ href=”#”>Item 2</a></li> </ul>

And the following CSS:

#nav li a {background-image: url(“nav.gif”)} #nav li a.item1 {background-position: 0px 0px} #nav li a:hover.item1 {background-position: 0px -50px} #nav li a.item2 {background-position: 0px -100px;} #nav li a:hover.item2 {background-position: 0px -150px;}

Where nav.gif contains a grid of different images. In short, the background position is shifted to use various image positions in the grid image. The code above is very simplified, but you get the main idea. Read Dave Sheas article for a detailed description of the technique.

There are also other ways to use it. Douglas Bowman wrote an article in 2003 entitled Sliding Doors of CSS where he created flexible CSS tabs. This can be combined with CSS sprites, have a look at Sliding Doors Meets CSS Sprites. You can also create CSS-based image maps.

As always, apply common sense since the technique is not always an improvement. Some images may be difficult to combine in a grid and be careful with variable-width elements such as input fields. If the grid image is very large, it could cause a long download time as well as wasting browser memory while decompressing. It can also be a pain to make it work in every browser and it may increase complexity in your web project.

[2006]

Featured stories

Conquering Machu Picchu

Conquering Machu Picchu

"A life-long dream came true this morning, as I stood upon the mountain looking down at Machu Picchu. I felt like some strange mix between Indiana Jones and a small boy, gazing down upon the final treasure of the Incas."
The urban maze of Tangier

The urban maze of Tangier

"The old Medina is full of fascinating gates and narrow alleys, where I blend in like Moby Dick at a NIN concert."
The fairytale castles of Sintra

The fairytale castles of Sintra

"The Portuguese town of Sintra is famous for many beautiful castles. Palácio Nacional da Pena is arguably the most stunning of the lot. "
Wazzup in Vaduz

Wazzup in Vaduz

"Vaduz Castle is overlooking the town from a hill, a short walk from the center. It’s really a postcard view with the alps in the background, which I’m sure the prince enjoys as he sips his morning coffee while towering above his loyal subjects."
The sound of Salzburg

The sound of Salzburg

"It is based on the true story of Maria von Trapp, even though I suspect she didn’t go singing alone in the mountain ranges."
The streets of Paris

The streets of Paris

"One of the advantages of repeated visits to a place is the leisure pace of awe and discovery while drifting slowly down the worn streets of the French capital."

Instagram

Seville
Venice
Fever Ray
Rome
Basel
Kuala Lumpur