CSS Sprites

As a web designer, Are you still slicing your images (icons, buttons, layout and mouse over images) and think that this slicing will make pages load faster. All that technique did was of dark ages of www and 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.

Let’s look at a quote from the article “Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests” by Tenni Theurer on the Yahoo! User Interface Blog.

Every single image, whether it’s an <> tag or an background-image from your CSS is a separate HTTP-Request, so you can image how quickly those requests can wrack up.

So what are the CSS Sprites? CSS Sprite is a single image containing set of images used in website the only thing is to place your image set in css sprite and on one image at a time and off all other images. The image will load at once instead of loading all images one by one and save not only HTTP requests but also total size of images.

You can quickly preview the CSS-Sprite example in action by downloading the source code from here

The comparison of old sliced images and this CSS-sprite images load time according to the above example is as follows.
OLD Slicing technique (10 HTTP Requests, 21KB image size) CSS Sprite Method (1 HTTP Request, 13KB image size)