I gather that via his example ( http://css-tricks.com/examples/CSS-Sprites/Example2After/default.htm ), all 6 icons I see are actually 1 image with different background-position. Am I getting it right so far?
You are right – one image. :)
Its just the same as if you call any image more than once on a page, example:
The browser would just use the same image again from cache, it knows its got the image, its just doing what its told. There are no rules to say how many times it can or cant be used, a digital image is not limited by physical constraints. Its not like you have given a photo for your Nan to look at but at the same time given exactly the same photo to your Mum who’s on the other side of the room… A digital image can be in the same place at the same time more than once :) Same goes when you call it with CSS Background.
Yes. Basically – if you can its good to sprite as much as possible. my site is sprited lots, it saves loading by not really the time it takes to load, but the requests your code makes to the server. If you have 20 images it has to go to the server and ask it 20 times for that image THEN load it. Now normally a server is limited on requests, to about 2 or 3 at a time, this stops the server from falling over.
Its kinda like going to the cash machine for $100 and drawing $10 walking away, then coming back until you have $100. Why not just take $100 out the first time?
So you can see its not about file size really, but about request amount.
yea you would – but you have to balance it with usability. For example I have a transparent PNG sprite and a JPG sprite – then all my little bits go in that. Anything that repeats, for example a background image will really need its own img file, although it can be done, it gets a little messy.
Thanks!
Dave
No you are right – it does take a while to get your head around sprites, but once you do the penny drops as to say and everything is goooood lol :)
