Introduction

Web developers tend to slice images into smaller pieces for various reasons. Often there is the assumption the combined file size of two smaller images will be less than a single large image. Sometimes this is true but usually it's not.

There may be times when slicing is necessary but the basic components of a web site like its navigation, tabs, menus, title bars, boxes, buttons and icons shouldn't be sliced because there is a much better technique known as CSS Sprites.

In the context of graphics a sprite is simply a single image file that contains multiple images within it. Old video games like early Mario Brothers used sprites to bitmap 2-dimensional scenery graphics and that sort of thing. Using this same technique on a web site can pay big dividends.

File Overhead

An image is more than just the image you see. Every file has some overhead to it beyond the actual image data. The more files or slices you have the more overhead as well.

Imagine a site that has 10 sliced buttons for the main navigation and each button has an accompanying graphic for the hover state. A total of 20 files would have to be downloaded just for the navigation. That's 19 files of unnecessary file overhead.

If there were 10,000 fresh visits to the web site 200,000 downloads would potentially occur. I say potentially because depending on how the web page was created the hover state buttons may require a "hover" to occur before they are downloaded. Either way at least 100,000 downloads would be required, reducing the number of available connections to the server and littering the pipe with unnecessary file overhead.

If a CSS Sprite were used only 10,000 downloads would be required and considerably less bandwidth would've been used, allowing the site to make the most of the bandwidth allotted by their hosting provider.

Connection Overhead

When you visit a web site an HTTP connection is established between you and the web server. Once connected, your web browser requests the document you asked for (an HTML home page, perhaps) and after receiving the file it is read to determine what else needs to be downloaded and how to visually render the page.

The original implementation of the HTTP protocol (1.0) required every request to open a new socket connection to the server. In the navigation example at least 11 connections would have been created, 11 files downloaded and 11 connections closed (1 document + 10 images). If the hover state buttons were preloaded, the total would have been 21 connections.

Needless to say, the original HTTP implementation was very inefficient and a complete web page may have required 50 or more connections.

With HTTP/1.1 an official connection Keep-Alive method was established to address the inefficiencies of opening and closing a connection for every request, among other things. By default, the connection remains open for subsequent requests to the server until the client or server explicitly closes it with a Connection: close HTTP header or the connection simply times out.

Now while the current version of the HTTP protocol doesn't include the overhead of opening and closing connections for every request, image slicing still has to contend with requesting multiple files one by one over the "kept-alive" connection.

By using sprites throughout a web site you'll end up with a faster, cleaner and generally more responsive site that puts a friendlier load on file servers. This is especially true for busy sites.

Before and After (real savings!)

Let's take a look at a before (image slicing) and after (css sprites) example.

Often I see sites that have individual graphics for just about everything. The before example starts out with such a scenario: 5 normal state buttons, 5 hover state buttons and a header / nav bar background image on the far left.



The first thing you'll notice about the after example is that the buttons have no text in them. Unless you're using a font that's not supported by web browsers I recommend the use of HTML text. If you use HTML text the same graphic can be used over and over even though the text in them is different. I always try to use HTML text for the main components of a web site.



As you can see CSS Sprites are light-weight and fast.

Continue with How Sprites Work ➜