Use CSS sprites for icons to improve end-user performance

Was just about to raise this myself.

I've done it anyway (for D6) and no module changes are required. Just create the necessary sprite and include over-riding styles in your theme's systlesheets. You will need the software and ability to create transparent PNGs of course and be happy with a spot of css.

It would give the opportunity for people to create their own logo packs and make them available through this module.

Just adding my +1 to this. It would be a really great enhancement.

It might not be worth it if the site only uses one or two of the icons though.

I like this. Someone care to work up a patch? Should we use a Sass/compass sprite generator that will also handle retina for us?

We can use http://spritegen.website-performance.org/ to join the images together.

Then we just have to change the css based on each image. Not sure where we would store the coordinates for each sprite though.

For the large icon set.

.sprite-icon-bliptv{ background-position: 0 0; width: 36px; height: 37px; } 
.sprite-icon-delicious{ background-position: -86px 0; width: 35px; height: 36px; } 
.sprite-icon-facebook{ background-position: -171px 0; width: 36px; height: 37px; } 
.sprite-icon-feed{ background-position: -257px 0; width: 36px; height: 37px; } 
.sprite-icon-flickr{ background-position: -343px 0; width: 36px; height: 37px; } 
.sprite-icon-googleplus{ background-position: -429px 0; width: 36px; height: 36px; } 
.sprite-icon-lastfm{ background-position: -515px 0; width: 36px; height: 37px; } 
.sprite-icon-linkedin{ background-position: -601px 0; width: 36px; height: 37px; } 
.sprite-icon-myspace{ background-position: -687px 0; width: 36px; height: 37px; } 
.sprite-icon-newsletter{ background-position: -773px 0; width: 36px; height: 37px; } 
.sprite-icon-picasa{ background-position: -859px 0; width: 36px; height: 37px; } 
.sprite-icon-spiceworks{ background-position: -945px 0; width: 36px; height: 37px; } 
.sprite-icon-tumblr{ background-position: -1031px 0; width: 35px; height: 36px; } 
.sprite-icon-twitter{ background-position: -1116px 0; width: 36px; height: 37px; } 
.sprite-icon-viadeo{ background-position: -1202px 0; width: 36px; height: 36px; } 
.sprite-icon-vimeo{ background-position: -1288px 0; width: 36px; height: 37px; } 
.sprite-icon-virb{ background-position: -1374px 0; width: 36px; height: 37px; } 
.sprite-icon-xing{ background-position: -1460px 0; width: 36px; height: 37px; } 
.sprite-icon-youtube{ background-position: -1546px 0; width: 36px; height: 37px; } 

I'm closing it because the issue was created a long time ago without any further steps.

if you still need it then raise a new one.
thanks