1

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!

user657847
  • 153
  • 1
  • 3
  • 8
  • 1
    @zneak: no, he did not. @user657847 : if you have independent questions (as is the case) you should split them into different threads. (Good questions, btw.) – ANeves Apr 04 '11 at 17:56
  • 1
    Here's a blog post I wrote up a while ago that is related and should help you with spriting: http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/ – Ryan Doherty Apr 04 '11 at 18:15
  • That is some good stuff. Thanks! – user657847 Apr 04 '11 at 18:42

3 Answers3

2

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.

DA.
  • 39,848
  • 49
  • 150
  • 213
  • Good stuff. Is there like a way I can like screen the person before he registers into the forum? Like force him to somehow cache the images as part of the registration process? – user657847 Apr 04 '11 at 18:13
  • you can't force a browser to cache. You can request it does. You do that with the server. Example: http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html – DA. Apr 04 '11 at 18:16
  • Yes, I already have the mods for caching. But how efficient is it really? So like is the most I can do, is just have the spritesheet of 40images beside the registration screen? Is there any telling whether a browser would pick it up or not? – user657847 Apr 04 '11 at 18:24
  • @DA: the first time you use the spritesheet images, browsers should cache it, and use that version on subsequent requests (assuming you’ve put in the requisite HTTP caching commands, and the user doesn’t clear the cache or force a true refresh). So you could include it on the registration screen. Creating a JavaScript image object with the image, even if it’s not displayed on the page, can cause browsers to cache the image file. – Paul D. Waite Apr 04 '11 at 19:22
  • @Paul: 'should' is the key word there. It's still up to the browser. That said, not sure how much would be gained anyways putting it on the registration page. The image has to get loaded regardless of the page it's on. Might as well just wait to call that image on the page that needs it. – DA. Apr 04 '11 at 19:27
  • Yeah you're right. It just seems like there would be an excessive amount of http request then. Wish there was a good solution to that :/ – user657847 Apr 04 '11 at 19:37
  • @DA: totally agree on both points. The only thing I’d add is that if this big avatar sprite image isn’t *shown* on the registration page, it might be a good time to request it via JavaScript (and hopefully cache it), because it would be downloaded whilst the user is looking at/interacting with the registration page, so the user wouldn’t actually be waiting for it to load (they’d be unaware it was even being downloaded). I think this is referred to as lazy loading. However, the best thing is to write the site, *measure* performance, *then* see where you need to improve, *then* figure out *how*. – Paul D. Waite Apr 04 '11 at 20:05
1

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.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • Pretty neat, so the moral of the story is to arrange your images so it is just one big row? – user657847 Apr 04 '11 at 18:38
  • @user657847: not sure about that — my sprite image was basically a bunch of repeated logos. Without the repetition, I don’t think it would have made any difference. I think the moral is to mayyybe try a couple of variations if your sprite image is getting really big. – Paul D. Waite Apr 04 '11 at 19:20
0

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.

Saffire
  • 1
  • #2: CSS :hover background-image changes are much, much slower without using sprites if the image hasn't been requested yet. – Wesley Murch Apr 04 '11 at 20:48