7

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?

JasonDavis
  • 48,204
  • 100
  • 318
  • 537

5 Answers5

15

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.

marcgg
  • 65,020
  • 52
  • 178
  • 231
  • you're welcome :) if you need more info in order to accept the answer let me know – marcgg Aug 18 '09 at 15:00
  • 1
    I'm still wondering if I should go the way of image sprites, and wonder at what scale it really starts to pay off. It sounds like adding quite some extra maintenance for development - The 'mouse over' argument is false though. You can quite easily preload the hover images. – Dirk Boer Aug 16 '13 at 13:50
  • 1
    @DirkBoer The mouseover argument was valid in 2009, right now browsers are more clever and preloading hover images is way easier. The image sprite starts to pay off when you start having a few images (maybe >5). On my apps I can see that reducing requests is a good thing (and makes YSlow happy). Dev & maintenance costs are just setup "fees" as you can automate the process of creating sprites from a batch of images. How you do it depends on your preferences / tech stack. hth – marcgg Aug 20 '13 at 08:15
4

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.

Greg
  • 316,276
  • 54
  • 369
  • 333
0

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.

Emily
  • 9,926
  • 4
  • 31
  • 39
0

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.

Pawka
  • 2,526
  • 3
  • 25
  • 32
0

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.

restlessdesign
  • 1,489
  • 1
  • 14
  • 18