css background rollovers, http requests opinions

Levi

Levi

Moderator
Staff member
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 :)
 
ah so its basically my idea but I didn't know what it was called :)

So is this a better or worse approach?
 
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 :)
 
cool, I'll do a tweaked page using a sprite version and then do a comparison on load times, file sizes etc :)

Ta very
 
You must log in or register to reply here.
Back
Top