hurricanesoftwares

How to Improve Website Performance Using CSS Sprites

CSS Sprites is a technique by which we can combine multiple images in a single big image and position the various parts of this big image with our elements using pure CSS attributes. The primary objective behind using CSS Sprites is to decrease the number of HTTP requests and thus decreasing the request stress on server. The idea behind CSS Sprites is to consolidate multiple images into one sprite and then selectively display portions of this sprite with positioning. It starts by creating a larger CSS Sprite by grouping more than one images (usually icons) together and aligning them in proper grid style to aid the positioning. Then it is aligning used a proper positioning values on the webpages to show their respective images. This way it decreases the number of HTTP requests and thus increases the overall speed of webpages. Sometimes back, we used the favourite slicing technique to break down a larger image into smaller slices (parts) so as to make pages load faster, but all this technique was only fooling our eyes as the page looked like loading faster, while in reality it was not. Each of those images was fed up as a separate request to the server and would increase the time of loading actually. According to Yahoo UI blog, the resultant sprite created by joining smaller images is always smaller in size than the combined contributed parts. It is because we have to use a single color table for the sprite instead of individual color tables for the contributed ones. Another advantage of using sprites is that this way we save the overhead required by the images.

Reduce File Overhead using CSS Sprites

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.

Reduce Connection Overhead using CSS Sprites

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. How CSS Sprites Help in Connection Overhead Notice in the CSS below how the anchor tag does not get a background-image, but each individual class does.

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

Using CSS Sprites, we can really lighten this example up. Instead of having ten separate images for the buttons (five default states and five rollover states), we can literally combine all of them into one big long image. I won’t go into great detail about how this is done, I’ll just give you a basic walkthrough. Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place you images into this new image, left aligned, one on top of the other with one pixel of white space in between.

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

We were able to reduce the number of HTTP-Requests by 9 and the total file size of the image(s) by 6.5 KB. That’s a pretty huge improvement for such a little example. Imagine what you could do on a full website.

Benefits and pitfalls

A couple of final thoughts. Our new CSS Sprite method tests well in most modern browsers. The notable exception is Opera 6, which doesn’t apply a background image on link hover states. Why, we’re not sure, but it means that our hovers don’t work. The links still do, and if they’ve been labeled properly, the net result will be a static, but usable image map in Opera 6. We’re willing to live with that, especially now that Opera 7 has been around for a while. The other concern is familiar to anyone who has spent time with FIR. In the rare cases in which users have turned off images in their browsers but retained CSS, a big empty hole will appear in the page where we expect our images to be placed. The links are still there and clickable, but nothing visually appears. At press time, there was no known way around this. Then there’s file size. The natural tendency is to assume that a full double-sized image must be heavier than a similar set of sliced images, since the overall image area will usually be larger. All image formats have a certain amount of overhead though (which is why a 1px by 1px white GIF saves to around 50 bytes), and the more slices you have, the more quickly that overhead adds up. Plus, one master image requires only a single color table when using a GIF, but each slice would need its own. Preliminary tests suggest that all this indicates smaller total file sizes for CSS Sprites, or at the very least not appreciably larger sizes. And lastly, let’s not forget that our markup is nice and clean, with all the advantages that go along with that. HTML lists degrade wonderfully, and a proper image replacement technique will leave the text links accessible to screenreaders. Replacing the sprite imagery is dead simple, since all of our dimensions and offsets are controlled in a single CSS file, and all of our imagery sits in a single image. CSS Sprites can save you from connection overhead, though its quite a task but if done carefuly will do wonders. Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make. I would love to hear your comments. Subscribe for our RSS for free updates delivered to you.