I had a client who requested a fast loading website since it will be used by more people. He noticed the images in his website were loaded slowly. The “contents” were loading first before the images, navigations or buttons. When I checked his current website’ source code, I noticed a bunch of images that needs to be loaded. They sliced those images to make pages load faster.
All that technique did was fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of those images is a separate HTTP-Request, and the more of those, the less efficient your page is.
It’s actually quicker to have all those images into one file. And we can do this by using CSS sprites.
CSS sprites allow you to create a single file that contains all the images laid out in a grid, requiring only a single image and only a single server call. It reduce HTTP requests and the loading time of pages. This is the main reason why CSS sprites are often used on websites with heavy traffic, where millions of page impressions would need “only” a tiny fraction of what could otherwise be 30,000,000. Hence, CSS sprites are commonly used, particularly for navigation (such as for hover effects), icons and buttons.
Here’s how it’s done
We are going to create a navigation that look like this
First, we need to create an image that includes link, hover, visited and active images. Literally, we combine all these images into one file. I named it “button.png”.
The markup
Here’s the html markup
<div id="nav">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</div>
The Style
By using the CSS below, we can create our navigation
#nav ul {
list-style: none;
padding: 0;
margin:0;
float: left;
}
#nav ul li {
float: left;
}
#nav ul li a {
width: 16px;
height: 20px;
float: left;
margin-right: 4px;
padding: 10px 12px;
color: #fff;
text-decoration: none;
background: transparent url(../images/button.png) no-repeat;
}
#nav ul li a:link {
background-position: 0 -18px;
}
#nav ul li a:hover {
background-position: 0 -90px;
}
#nav ul li a:visited {
background-position: 0 -162px;
}
#nav ul li a:active, #nav ul li a.active {
background-position: 0 -234px;
}
Notice in the CSS that there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.
I was able to reduce the number of HTTP-Requests by 1 instead of 4 requests (link, hover, visited & active). That’s a pretty huge improvement for such a little example. Imagine what you could do on a full website.
Click the link below to download the html/css version of this tutorial.
