Questions regarding CSS spritesheet (and somewhat about caching)

1) First, should I order the images in my spritesheet a certain way?(like biggest to smallest images, or images that appear at the top of the page to bottom of the page?)

2) Say I have a css spritesheet that contains before and after images. Like the image shows a cow, but when the image is hovered, it shows a cow with wings. Is it in my best interest to not use css spritesheet for that then? Does the css load all the pictures in my spritesheet at once?

3) Is a spritesheet better in terms of caching? Unrelated, but what does it take for a browser to cache something? I mean if it's only after a single page view, perhaps it's not worth it.

4) Lastly, I want to start a forum. I don't know anything about forums yet, but I plan to start one soon. I'm thinking of just having like a default set of 40 images that people can only choose from as their avatars.开发者_运维问答 Should I even make a spritesheet for those images (if it's even possible)?

I know this is a lot of questions, so please answer any that you have knowledge of. Thanks!

A 'spritesheet' is just one large image. So...

1) Doesn't matter.

2) Again, it's just one image. If not all users will want to activate the 'after' feature, then you can save them some bandwidth my making the afters a separate sprite. If most people will want to use the after feature, then you can save them bandwidth by making it all one sprite. (Though note if we're talking really large images, there will be a practical limit to how much you want to stick into one sprite. No one is going to wait to download 1mb file, for instance).

3) Again, a sprite is just an image. It has the same caching pros/cons as any image.

4) 40 hits on the server is a lot compared to 1 sprite. So, based solely on that, a sprite would be useful. But if it's rare that you'll get more than 10 or so of those avatars on one page, then the sprite would be a detriment, as it's loading such a large file.

Just on the ordering of images, I have a sprite file for a site I’m working on that contains various browser logos with version numbers added to them. As such, there’s quite a lot of repetition in visual information in the file.

I was quite surprised to find that the direction of the repetition could have a big effect over the file size I could achieve for the image when saving as a PNG. When I had similar logos in columns, the file came out at about 120 KB; whilst when I arranged them as rows, it came out at 41 KB.

Once the project’s live I’ll post the actual images. It’s probably quite rare to have such similar images repeated in a sprite file; normally your images would be different, or you’d just use the same image repeatedly. (Indeed, I might end up refactoring my sprites so that the varying bits are in their own file.) But I hadn’t realised that such supposedly similar images could be encoded in two files of such varying sizes, purely based on the geometric arrangement of the elements in the image file.

1) Not sure, but I don't think it would matter much, if at all.

2) The best way to do this is with CSS image rollovers.

3) Spritesheets would be better for caching, since it's only a single image, instead of the web server having to connect, send an image, disconnect, send again, send another image, disconnect, etc...

4) I would just use single images. There's really no reason to use a spritesheet in that situation.