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.