What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 130 Stack Exchange communities.

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 replies-off.png
alt text replies-on.png
alt text comment-del.png
alt text comment-del-hover.png
alt text feed-icon-small.png
alt text tag-chrome.png
alt text tag-adobe.png
alt text 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?

share|improve this question
    
My favorite sprite is still Apple's 1 billion app/10 billion songs countdown :-) –  Arjan May 13 '10 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 '10 at 17:04
    
see, for example, cnanney.com/journal/demo/apple-counter –  Arjan May 13 '10 at 21:31
    
@Arjan Wow, terrific! And nice, semantic HTML! :) –  Marcel Korpel May 13 '10 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 '11 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 '11 at 15:35
    
@Shog9 - I knew I had seen that somewhere. Couldn't find it, though. –  Kevin Vermeer Nov 23 '11 at 15:37

1 Answer 1

up vote 10 down vote accepted

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.

share|improve this answer
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 '10 at 8:18
    
@gman yes, at the cost of having to juggle both x and y coordinates each time –  Jeff Atwood May 13 '10 at 8:34
    
@GMan It will hardly matter, seeing as it's easily compressed white space. –  Pëkka May 13 '10 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 '10 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 '10 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 '10 at 17:17

You must log in to answer this question.

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