14

I recently stumbled upon Stack Overflow's CSS sprite:

sprite

which caught my attention because of the large space that's not used by anything.

I don't have too much experience working with sprites, but I do know (correct me if I'm wrong) that these were designed to minimize the number of requests by combining multiple (small) images into one compact image, so the number of requests is reduced to one, and that one file's size should be as small as possible.

Why aren't the icons positioned side by side, from left to right, and from top to bottom, instead of two columns in the left and right sides of the image?

6
  • 20
    Empty space in an image like that doesn't increase the byte size of the image too much, because of how images are compressed. See en.wikipedia.org/wiki/Image_compression
    – Undo Mod
    Commented Jul 27, 2014 at 22:29
  • 1
    It might make for nicer code/less frequent changes to the CSS. (And, of course, the image has to be at least that wide to begin with, to accommodate the logo.)
    – Ry- Mod
    Commented Jul 28, 2014 at 3:19
  • @Undo, I didn't know that, thanks for the info. But still, why the empty space? Commented Jul 28, 2014 at 6:55
  • @minitech, I thought of that, but I can't understand in which case you would need not to change the CSS. I mean, if you edit an existing icon, you redraw it in the same place, if you want to add a new one, you would still need to change the CSS, and if you want to remove an icon, why wouldn't you remove the CSS classes using it? And, of course I knew that the image has to be that wide, but why that tall? Commented Jul 28, 2014 at 7:00
  • 3
    The next question would be "is this space for hire?"
    – Jongware
    Commented Jul 28, 2014 at 10:19
  • It turns out that the current image is 18.9 KB which could be brought down to 14.9 KB as-is and down to 12.3 KB when unnecessary whitespace is removed. Commented Nov 25, 2014 at 7:55

2 Answers 2

20

It was this way simply because it was historically, wasn't causing any issues, and the only thing that could result from changing it is possible bugs.

With the new design, there's good reason to change it. We can lay out all the sites on the same sprite layout with a shared base .less that contains positioning and eliminate the need for 2 sprites (regular vs high-DPI). Starting with pt.SO and now Stack Overflow/Meta we are shifting to SVG sprites now that browser support is good enough for them.

Some stats:

  • Old Sprites.png (all icons):
    • 19.4kB transferred
    • 19.0kB file size
  • Old High-DPI [email protected] (not all icons, shared ones had moved off):
    • 15.8kB transferred
    • 15.4kB file size
  • New Sprites.svg
    • 3.4kB transferred
    • 9.0kB file size

SVG allows us to do many things. We can save bandwidth, only have 1 image, and eliminate media queries and some CSS declarations for the normal/high-DPI difference since there no longer is one. On top of that SVG is text. We don't have to remember to compress PNGs or have any build process for that to happen. We can source control it easier and even batch update many sprites at once since it's XML (for instance if we added some new icon to n sites at once). There's just so much we can do that we can't do with a binary image, SVG makes life easier and prettier.

You can see the new sprite here:

Stack Overflow Sprite

2
  • 1
    Never really thought about SVG sprites :-? (mainly because I shifted away from web development). Commented Jan 18, 2015 at 13:20
  • 2
    I added some reasoning and stats behind SVGs that people may find interesting, hopefully others find why we're using them to be useful in itself.
    – Nick Craver Mod
    Commented Jan 18, 2015 at 13:33
0

It's possible that they could of had an earlier version of that sprite, which did include other images in that huge blank area... Instead of re-arranging all the css background-position attributes and the images to make the sprite smaller... they just said it's not worth that, and just left the sprite as it is for the most part, just removing the unused images from it

2
  • 10
    This looks more like a comment than an answer. Commented Jul 28, 2014 at 3:35
  • Aren't there any tools that can help with that? Or better yet, didn't they make an internal tool for that? I think they need that, since they have a different set for each website, which could change frequently. Commented Jul 28, 2014 at 7:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .