Question about CSS Sprites

[davidliu]

I just read Chris article regarding Sprites @ http://css-tricks.com/css-sprites/

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?

Here’s where I am lost: If they are actually 1 image, how is it possible the browser render this single image in 6 positions simultaneously? I thought we need 6 individual images to show then all at once. Unless it is just possible, then I guess my question is answered.

Basically then, we can combine ALLour images into a single image file, adjust background-position to show the different areas of the file, and have the browser show them all on the page even if their location are all over the place? And benefit from a faster load time?

For example, if I were to design a page with LOTS of images and icons (even banner ads, links graphics, buttons graphics, text graphics, etc.) all over the place, will stitching ALL of them into 1 single file in Photoshop and adjust background-position a realistic and efficient option? Do we really decrease the load time?

Not sure if I’m asking the right questions here, I hope I’m pretty clear and everyone can benefit from this.

Thanks!
Dave

[Rob MacKay]

"davidliu" wrote:

I just read Chris article regarding Sprites @ http://css-tricks.com/css-sprites/

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. :)

"davidliu" wrote:

Here’s where I am lost: If they are actually 1 image, how is it possible the browser render this single image in 6 positions simultaneously? I thought we need 6 individual images to show then all at once. Unless it is just possible, then I guess my question is answered.

Its just the same as if you call any image more than once on a page, example:

Code:

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.

"davidliu" wrote:

Basically then, we can combine ALLour images into a single image file, adjust background-position to show the different areas of the file, and have the browser show them all on the page even if their location are all over the place? And benefit from a faster load time?

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.

"davidliu" wrote:

For example, if I were to design a page with LOTS of images and icons (even banner ads, links graphics, buttons graphics, text graphics, etc.) all over the place, will stitching ALL of them into 1 single file in Photoshop and adjust background-position a realistic and efficient option? Do we really decrease the load time?

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.

"davidliu" wrote:

Not sure if I’m asking the right questions here, I hope I’m pretty clear and everyone can benefit from this.

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 :)

[davidliu]

Robskiwarrior,

Now I feel like an idiot :o Thank you so much for clearing it up for me (and others who may need it). Always learning here!

And thanks Apostrophe for the live example, I’ve seen the image property and saw how they compile all the image to a single file.

Can’t wait to create one!

[Rob MacKay]

No probs dude :)

[Author]

Posts