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.