Published in CSS on Thursday, July 26th, 2007
A review of using the CSS sprites method and optimizing the use of background images in websites to reduce requests and improve page load time.
This post was originally published on May 13th, 2004. As others are writing about the topic, I thought bringing it out of the archives would be worthwhile.
The idea of placing multiple states of buttons and other elements that are used in background images took its roots, I believe, from Pixy's Fast Rollovers. The CSS Zen Master extended this to another purpose in CSS Sprites: Image Slicing’s Kiss of Death. Didier Hilhorst came up with a nice application of this method, and I worked it backwards in Responsible CSS - Recycle your background images.
The idea behind the 'sprites' method can obviously be extended to any html element, and there are tangible benefits for doing this, just as long as the designer does his or her usual homework.
What are the possible the benefits of using this method? Essentially it lies in faster download times for your web content.
Readers of Andy Kings book, Speed Up Your Site: Web Site Optimization will notice that this method reduces http requests and makes more efficient use of the data packets used to transfer files to the users computer, and that that is a good thing.
From Web Page Design and Download Time, by Jing Zhi of Keynote Systems (seen here - pdf), cited in Andy's book:
The basic performance principle is therefore to make fewer requests and transmit fewer packets. From this principle, we can derive two basic design rules for wellperforming Web pages. First, reduce the overall size of the page, thereby reducing the number of bytes (and packets) to be transferred over the Internet. Second, limit the number of embedded objects on the page, such as images, each of which must be requested and transferred separately from server to browser.
They also found that it was the number of packets and not necessarily the overall size of the page that was important. If a packet could hold 1460 bytes (the figure given in the article) and your object was 1600 bytes, it would require two packets. They found that this object would transfer at the same speed as another object that was greater in size but still fit in two packets.
The potential payoff for using this method versus individual images, then, is a faster download time due to reduced number of packets and fewer http requests.
Reducing http requests is easy. One file instead of two or three etc. is simple. But packet requests? That depends...
The number of packets sent will depend on the size of the file and the users internet connection.
As an example, lets look at the fiftyfoureleven.com logo at the top of the page. When this design was first being coded, that link consisted of two 3.34kb images, one for the link state and one for the hover state. Now, by using one image that contains both states and simply bumping it back and forth depending on the hover state, that has been reduced to one 5.35 kb image. Right there is a savings of 1.33 kb. Good news.
Now, for arguments sake lets say that a packet can hold 1460 bytes (packet size for connections greater than 128kb/s = 1500 bytes -40bytes for tcp/ip headers). The two image method used 6 packets, 3 for each image (3.34/1.46, rounded up). The single image method uses 4 packets (5.34/1.46, rounded up).
Things are looking good.
In his alistapart article, Dave refers to the image that holds all of the sprites as his 'master image'. The key to benefitting from this method is to ensure that the file size of your master image isn't a bloated equivalent versus the sum of its pieces.
Great benefits can be realized when combining a master image from slices that fall well below the size of one packet, as that unused packet space goes wasted.
After doing a little more research, it seems that packet size can vary depending on the connection rate. That being said, it may be rather difficult to come up with a firm rule here. To play it smart and safe, try and:
This isn't exactly groundbreaking advice, however having seen the results acheived with the logo on this page, it can be seen that using the sprite method versus individual images at minimum does reduce http requests and even further it can reduce file size which in turn can reduce the number of packets sent.
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
The best use of sprites which i've come across is in presenting the world's flags on a single page.
We've done this on our soon-to-be-relaunched site and you can imaging the benefits in reducing 160 connections to one.
Whilst on other sites, you sit there watching all the flags pop up one-by-one, here you wait a second and they're all there.
Nice article. I\'ve performed this optimization on several sites and have seen a dramatic impact. I\'ve written an article on improving page load times, and have a section demonstrating how to use Css Sprites (Image Stacking):
http://www.getsnappy.com/web-optimization/improving-page-load-times.html#image-stacking
Article is nice for optimization, thanks for sharing\n