css background rollovers, http requests opinions

[Levi]

Ok question and opinion time again

On my site that I'm working (smiley face below) on I've got rollovers using the css background approach (ie shifts up when hovered over) and when I use yslow to analyse the site it keeps complaining about the number of http requests and suggesting using sprites (no idea what they are).

Now I currently have each background as an individual png file (they're all different) with the top being the normal and the bottom being the :hover image meaning I have 10 or so png files in 2 rows (top and bottom menu bits).

I know that images and text can download in parallel but would I see any benefit of grouping the menu rows into one/two big images and then repeat the same background image on each link using the position and size bits to adjust for each link thus reducing the number of http requests but not necessarily reducing the files size?

I don't think I will because it will still take just as long to download but I thought I'd get the opinions of the more experienced people

ps. it looks like my 'test' page is an older version so just ignore the crap coding as it's been improved since then

 

[Harry]

An image sprite is this: http://b.static.ak.fbcdn.net/rsrc.php/zEZ1P/hash/4mxpf6vf.png or http://s.ytimg.com/yt/img/master-vfl136487.png

So basically when you're hovering you're changing the background position in the x and y axes (e.g. background:url(/img/css/nav.gif) 50px 200px no-repeat; and so on).

 

[Levi]

ah so its basically my idea but I didn't know what it was called

So is this a better or worse approach?

 

[Harry]

Yeah it is I guess—shoulda said that lol.

It's a good approach, but totally not essential. Go for it, it'll be a good thing to learn and will do no harm

 

[Levi]

cool, I'll do a tweaked page using a sprite version and then do a comparison on load times, file sizes etc

Ta very

 

[Harry]

SpriteMe

 

[Levi]

that link didn't like my site, nothing major