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: