CSS image sprites

Question

Is the only benefit of using css image sprites that there is less http requests?

Or is there other benefits?

Also is there an easy way of detiming which area of a sprite to show?

Answer 1

Like you said, one of the main advantage is to reduce the number of requests to the server, improving the response time (especially if you're loading a large amount of small images). But this is not the only reasons people use sprites.

If you don't use sprites for a "mouse over" display, the user will see the image disappear for a second... and it looks really bad. This is because if you change the image instead of just moving the sprite around it will load a new image and the loading time can be visible to the end user.

.bad{
  background:url(abc.jpg);
}
.bad:hover{
  background:url(abcHover.jpg);
}

.good{
  background:url(abc.jpg) 0px 0px;
}
.good:hover{
  background-position:15px 0px;
}

Another advantage of sprites is that you can keep all your images in one location and in some cases it makes more sense (for menus and so on).

To determine which area of a sprite to show, just use photoshop or any other image editing software.

Answer 2

The primary benefit is your pages load faster, mainly because of reduced HTTP requests.

You could generate your sprite using a tool.

Disclaimer - I wrote this tool.

Answer 3

It is much easier to get image placement (especially next to text) the same cross-browser. You can adjust images up/down/left/right with out using vertical-align and padding.

I find it easier to keep track of all the images if they are in a single file. Especially since I usually have a transparent png images and and then use gif images for ie6. I save my png sprite map as a gif and add one line with background-image in my ie6 css and my images are switched.

I use photoshop or gimp to get approximate locations in the sprite map and then use firefox to fine-tune the placement.

Answer 4

Yes, there is another benefit. Every image file has his own headers, describing image type, colors etc. So when you combine images to a single sprite, you win some kb.

But as you said before, mostly you win by reducing HTTP requests count.

Answer 5

In terms of determining the area to show, I will typically place my elements on pixels that are multiples of 100. So if there's a sprite with a bunch of 64x64 pixel icons, I'll typically have them at (0, 100), (0, 200), (0, 300), etc.

This way, I don't have to type in an exact measurement (or any other developer for that matter) and save keystrokes when setting all my background-position properties.