10

As this answer shows, the editor icons of Stack Overflow [et al.] are packed into a sprite. To recapitulate, here is the image:

boring little icons

Lately the envelope icons, among others, have been changed. When looking into that, I noticed those icons weren't packed into sprites, but existed just as separate images, e.g.:

alt text http://sstatic.net/stackoverflow/img/replies-off.png replies-off.png
alt text http://sstatic.net/stackoverflow/img/replies-on.png replies-on.png
alt text http://sstatic.net/stackoverflow/img/comment-del.png comment-del.png
alt text http://sstatic.net/stackoverflow/img/comment-del-hover.png comment-del-hover.png
alt text http://sstatic.net/stackoverflow/img/feed-icon-small.png feed-icon-small.png
alt text tag-chrome.png
alt text tag-adobe.png
alt text http://sstatic.net/stackoverflow/img/vote-arrow-up.png vote-arrow-up.png

et cetera, et cetera.

According to a comment on this answer, doing multiple HTTP requests on a mobile device costs much more time than fetching one large(r) file in a single run. That way, Jon Skeet can make comments and edits on his travels to and from his work way more rapidly than in the current situation.

So, why aren't all icons packed into sprites?

Improve this question
7
  • My favorite sprite is still Apple's 1 billion app/10 billion songs countdown :-)
    – Arjan
    May 13, 2010 at 9:34
  • @Arjan: That looks quite nice! Too bad I never saw the working example. Hmmmm, perhaps I'll write one myself. Do you have the original sprite images?
    – Marcel Korpel
    May 13, 2010 at 17:04
  • see, for example, cnanney.com/journal/demo/apple-counter
    – Arjan
    May 13, 2010 at 21:31
  • @Arjan Wow, terrific! And nice, semantic HTML! :)
    – Marcel Korpel
    May 13, 2010 at 22:44
  • @Shog9 - Thanks for fixing the tag icons and editor buttons, but the other images (footnotes 4-8 and 11) are still blank.
    – Kevin Vermeer
    Nov 23, 2011 at 15:32
  • @Kevin: yeah, the ones that are missing were rolled into sprites.png (which is why this is status-completed.)
    – Shog9
    Nov 23, 2011 at 15:35
  • @Shog9 - I knew I had seen that somewhere. Couldn't find it, though.
    – Kevin Vermeer
    Nov 23, 2011 at 15:37

1 Answer 1

Reset to default
10

This is now mostly completed. Related to

http://developer.yahoo.com/performance/rules.html

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it's not recommended.

Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

Improve this answer
6
  • 1
    I don't know much, but wouldn't it be better to try to make the image smaller in size by making it more square?
    – GManNickG
    May 13, 2010 at 8:18
  • @gman yes, at the cost of having to juggle both x and y coordinates each time
    – Jeff Atwood
    May 13, 2010 at 8:34
  • @GMan It will hardly matter, seeing as it's easily compressed white space.
    – Pekka
    May 13, 2010 at 9:34
  • 2
    Would this explain why most of the images broke recently? I don't see the big logo in the upper left, the envelope is crowded against the "mmyers", and all of the controls in the input area run into the actual text area. This is on IE7, both XP and Vista.
    – mmyers
    May 13, 2010 at 16:18
  • @mmyers: Sounds like a caching problem. Can you try to clear your cache and visit SO again? Jeff, good job! I just wanted to leave a note I'd like to create those sprites. BTW, what's that pony-like icon at the entire bottom of sprites.png?
    – Marcel Korpel
    May 13, 2010 at 17:09
  • Ah, I already found out by looking at SO's CSS: it's a PostgreSQL icon. Couldn't you just grab their favicon, or does that give license problems?
    – Marcel Korpel
    May 13, 2010 at 17:17

You must log in to answer this question.

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