Image Sprites, The Easy Way
What exactly is an image sprite? Have a look above to see an example from our left-menu navigation! A sprite is just an image composite from multiple images, designed to speed up the user experience on a website. Amazon, Google, and other top-tier websites use image sprites. It’s completely invisible to you, but you’ll appreciate how snappy the page loads are as a result.
Since very few of us use dial-up internet connections any more, you may be wondering why some web pages load slower than others. You may not realize that every web page you visit can require hundreds of files before rendering properly. Accessing the New York Times for instance actually requires 111 files!
Your internet connection may be fast, but loading 111 individual files means 111 separate requests to the web server, and 111 separate transactions. Typically, you’ll just experience this as a few second delay, but it could be longer. Image sprites cut down on the quantity of these separate transactions by merging images into a composite image. For example, for the navigation image sprite example above, those 24 separate images are now a single request.
Creating image sprites, and also updating / maintaining them, can be a bit of a hassle. And, it used to required a separate image editor. Fortunately, some talented developers created a website called SpriteMe, and decided to take some of the leg work out of it. Give it a try! You can use their Javascript to evaluate any page you want, and it will generate the CSS and image sprite for you.
Posted on 25th of April 2010
