CSS Sprites, What is it and How to use it?

AD

You’ve probably heard about CSS sprites, but do you know what they really are and why you should use them?

A simple answer is that a sprite is a composition of multiple smaller images into one large image. See the thumbnail of this post for an example.

It might sound a little counterproductive to create a larger image, because it might take longer to download it right? Well, that’s not exactly true.

CSS Sprites – How It Works

Sample

Image Courtesy: Image Shack

Whenever a user comes to your site, the browser has to load each and single one of the images, unless they are already downloaded. Each of those images will take some time to download (regardless of its size) because of the internet connection latency.

If you’re sitting on a low latency network, say 50ms, and the web page has 20 images and other external files, it will take a minimum of 20*50*2 = 2 seconds of additional time to load the page, not counting the image size.

Most browsers are capable of downloading multiple resources at a time. The maximum number is different for every browser, but it is somewhere between 2 and 8 connections, so at best the 2 seconds get reduced to 1/8 of the time, which is 1/4 of a second.

That’s not much, but when you include the download speed, it goes up to at least half a second. Now think about all the server optimization you’re doing on the server side to reduce the page generation time from 50 to 20ms, and here you can save half a second on something really simple.

You’d think 20 images is a lot, but is it really? Think about a simple button with hover effect. That’s two images. Does it have “visited” state when you’ve already clicked it? Make it three, or sometimes even four.

How to Use it

This is an example of CSS Sprite for the login button here on Designzzz:

Both the hover and normal states are in one image. When the user puts his mouse over the button, all that happens is that the position of the background changes instead of the image itself.

.login-pad {
    background: url("http://www.designzzz.com/new_menu/button.png") no-repeat top center;
}

.login-pad:hover {
    background-position: bottom center;
}

That’s all you need to do, it wasn’t that hard right?

Another important thing to note is that JavaScript and CSS files suffer from the same issue. Regardless of their size, the browser has to download them separately, i. e. there is one additional request for each file you have on your page.

It is not uncommon to have 50 or more external resources on a page. This is why most websites are loading slowly, not because they are large, but because they have too many external resources and high latency connection.

Most of the shared hosting companies don’t provide high speed connection, so you can expect something like 150-250ms latency. Now let’s calculate that … 50 * 250ms = 12.5 seconds. Scary, isn’t it?

Conclusion

What I’m trying to point out here is that many people focus on optimizing the wrong thing. You might spend days or even weeks trying to figure out how to make your script run faster from 100ms to 50ms, but you miss the point that the website is slow because it keeps on loading 50 different resources.

Below are some examples for your inspiration to see how the major companies of internet are using this technique.

Examples

Apple

Example of CSS

Amazon

CSS Sprite Tutorial

Dragon Interactive

CSS Tutorial and Tips

Share the Love:


Advertisement

Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Further Related Readings

Jakub

Jakub is a college student from the Czech republic. Apart from being incredibly smart and lazy. Got exceptional Talent in Programming and Designing.
All Articles by
7 Comments on “CSS Sprites, What is it and How to use it?” Join The Discussion!
  1. SumarliĆ°i Einar DaĆ°ason says:

    Good article and argument.

  2. Unknown says:

    In my opinion, it should have been like this.

    CSS sprites == plural; title should have been “CSS Sprites, what are they and how do (I/we) use them?”

    1. Tayyab says:

      The previous commentator does has a valid point but here in this article, CSS Sprites is taken as a technique, that’s why it is treated as a singular. Title is like this “(The Technique of) CSS Sprites, What is it and how to use it”

  3. chukked says:

    good article, thanks for sharing knowledge

  4. avn.rocky says:

    Thanks for such a nice article :) – Avn

  5. Kunal says:

    It was good and I got to know few good things.
    I have also created a CSS sprite for my site at: http://kunals.com. Here, you can see an image on top left..here I have used this CSS sprite as painting.

    One can move cursor over this image and it will turn into colored picture.

  6. Chij Gurung says:

    interesting article about CSS Sprites thanks for sharing

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved