Webmasters and designers seeking ways of speeding up the perceived load time of their websites have a powerful tool at their disposal: CSS sprites — a well-proven way to boost website performance.
While frequently overlooked, the use of CSS sprites is nothing new and as such may represent a significant opportunity for those operators focusing on website optimization.
The use of CSS sprites is nothing new and as such may represent a significant opportunity for those operators focusing on website optimization.
Let us take a closer look:
For the uninitiated, a CSS sprite is nothing more than a master image composed of multiple images; with cascading style sheets used to determine the positioning of those component images. For example, a website that offers emoticons could use a different graphic for a smile and a separate image to frown — along with numerous other images that signify a range of user emotions. Combining these multiple images into a single CSS image sprite could give a tremendous boost to web pageloading performance.
The reason for this is that each image requires a separate call from the web page to the web server, with the round-trip processing delays often accounting for more than 80 percent of a page’s load time.
While this reasoning applies equally well to “photo” images as it does to page graphics, navigational images, emoticons, backgrounds and more, the file size of the sprite image also needs to be considered. For example, a dozen thumbnails from an image gallery are combinable into a sprite, but the full-size photos they link to should likely remain separate images, in order to avoid a multi-megabyte download.
To use sprites, you must first select the desired individual images and then combine them on to a base graphic — transparent PNG base images are typically used — that is large enough to accommodate the total pixel size of the individual images. For example, two 25x25-pixel images are combinable into a single 25x50-pixel sprite, a task readily performed in Adobe Photoshop, for instance.
For a hands-on example, try one of the many online sprite generators, such as www.csssprites.com.
As a test of this particular generator, three emoticons combined to generate a single sprite, with the resulting sprite PNG and enabling HTML code displayed, along with usage examples. The code is below:
.parent-element { background:url (result.png); }
To use image number one, add “background-position: 0px 0px;” for number two, the line changes to “background-position: 0px –28px;” and for number three, “background-position: 0px –53px;” — here, the horizontal width of all images remains the same, but the vertical positioning value changes to fully reveal the proper portion of the image. It is important to note that the parent element needs to be the same size as the displayed image. Enable linkable images by layering a transparent spacer PNG over the background, setting the spacer’s height and width in CSS.
An easy way to understand the process is to think of a CSS sprite as a book, with each image a page — if someone tells you to “turn to page 27,” you will see the content of page 27. Likewise, telling a web browser essentially to “turn the sprite to page 27,” will reveal the appropriate image. You did not load 27 images, just a single book, and then turned the page…
It sounds much harder to do than it really is and the benefits are quick and tangible. Try it yourself!