I was working on a website recently when I came across an issue I’ve encountered a number of times before, I’ve just never really thought about in depth until just the other night. Here is the question that I posed myself:

Which will result in better web site performance and faster speed: Larger files and fewer server requests? or Smaller files and more server requests?

I posted this question recently at LinkedIn Q&A to get some insight on the topic. I enjoyed all of the answers and was able to take something out of each, and decided to post about a particular topic that was mentioned in a couple posts.

Many websites use multiple small CSS images for things like background images, list icons, mouseovers, and more. The typical way of displaying these files (and I am just as guilty of it as anyone) is to make a separate reference to each one. That’s the “old school” way. With the power of CSS, and a little clever scripting, there is another “server-friendly” way that is gaining popularity and spreading like wildfire. This “new school” way uses a technique called CSS Sprites. Sprites have been around for quite some time, going back to the days of the Nintendo (I’m talking NES system here for all you old school gamers out there). A Sprite is basically a collection of all the images needed saved into one large image map. The map is then “sliced” to display only the part of the image map you want.

So how do we get from Nintendo to Web Design? Simple. Sprites are now being used to combine small images or icons on a website to reduce the amount of server requests a particular web site requires. The best way to implement Sprites is with CSS rollovers. Historically, rollovers required multiple images and Javascript to implement. With the introduction of the :hover pseudo-class in the CSS 2.1 specification, rollovers have been simplified to the point where they can now be implemented with just a couple lines of code.

To show an example, I’ll use a sprite that I used on a site we redesigned, AngelWithCrookedFeet.org. Below is one of the main nav links we use on the site (without the link).

Hover Example

Both of the boxes above use the one following image as the background image:

buttons

With this image as a “sprite”, the web page only has to make one image load, instead of three (active, regular, and hover states). Also, I have 5 links on the main page, that means I just saved 14 image loads and decreased the load time of the site

There are a number of ways to achieve this using a combination of id’s and classes, but the principle remains the same. Each of the above boxes has a class of .example-nav-link and the “Active Example” box has an id of #active_nav_link.

The following code makes the above sprites work:

.example-nav-link {
     width: 146px;
     height: 37px;
     text-align: center;
     background: url(http://www.poundbangwhack.com/wp-content/uploads/buttons.gif) no-repeat transparent 0px -37px;
     color: #fff;
     font-weight: bold;
     vertical-align: middle;
}

.example-nav-link:hover {
     background: url(http://www.poundbangwhack.com/wp-content/uploads/buttons.gif) no-repeat transparent 0px -74px;
}

#active_nav_link {
     background: url(http://www.poundbangwhack.com/wp-content/uploads/buttons.gif) no-repeat transparent 0px 0px;
}

The first rule for the class .example-nav-link sets the default rules and default state of the sprite. There are three important things to take note of in the code. First is the height and width. This sets the size of the link to the same size as one of our slices. When creating your sprites, make sure that each slice is the same size. This will make positioning the sprites easier. It also insures that only one slice is shown at a time as each slice is 37px high. The second thing to take note of is the background positioning. By default, the background image will be positioned at 0,0 (top left corner of the image). Since all the sprites are in the same column, the left position will always be 0px. The -37px will move the background image up 37px displaying the middle image, thus creating the default state of the background image.

The :hover statement simply moves the background image up another 37 px, for a total of -74px thus displaying the bottom image. The #active_nav_link rule sets the vertical position back to 0px, thus displaying the top portion of the image for the current active page.

For a more in-depth article and further information about CSS sprite’s, check out the article CSS Sprites: Image Slicing’s Kiss of Death at A List Apart by Dave Shea. I’ve also written previous articles where with reference to Dave Shea.

Check out these Related Posts