benefits of using css sprites rather then changing the background url

Question

I been working on rollover images with pure css and i am aware of 2 solutions to achieve the desired result. I wonder if there are any benefits which i am unaware of with those methods and if there is a preferred method or is it just a preference (I just want to make sure before i finish a giant project so there are no surprises later)

first method

The first method i run across is to save multiple images as one image. then to set the image as the background of a divider (that is smaller then the whole image) then on :hover you set background position to negative and the other images appear

Some cons and pros i thought of is that:

pros

• you do not need to preload the images manually (by placing code at the end of css file)

• It might be easier to organize your image files as there could possibly be fewer of them

cons

• it can be difficult to know how much exactly move the image especially if you have seperate team designing the graphics

second method

The second method i run across is to set an image background of a divider and then to change the background url on :hover

Some cons and pros that i can think of on top of my head:

pros

• possibly less time in development

• can exchange rollover images with more ease and dont need to specify the size of the divider

cons

• need to preload images at the end of css file

• possibly more mess in your image folder if you have a lot of files

Is there any pros or cons that i am missing? Is one method generally preferred over the other and why? Or is it personal choice and there is no problem with using either one??

Update: Here is a link to simple preload for the second method with pure css. I thought there was an even simpler way (of just placing the links) but i cannot find it. Still this is pretty basic.

Update(2): I have learned that sprites have additional

• benefits of making websites faster by reducing the number of http requests.

• and benefit of rollover being as fast as possible with no flicker

• And a blunder of making a less accessible site, and would limit the potential benefits of the title and alt attributes in the HTML. (if used incorrectly for all images instead of just decorations and buttons)

Answer 1

CSS sprites (the first method) is generally favored due to the fact that pre-loading isn't necessary to maintain a quality user experience.

the ALA link Wex posted is a good primer on the benefits of sprites, and Smashing Magazine recently published an article which addresses your concerns about background-position when using a sprite with many images

http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/

Answer 2

The first method is much better than the second one. You don't always have to bundle up every image into one giant image - that usually makes it hard to add new images - but it does make sense to put every image and their hover state in the same image so you don't see a flicker on hover, and so you don't have to rely on some preloading script.

Here's a good article that talks about the benefits of using CSS sprites: http://www.alistapart.com/articles/sprites