Is it faster to create an individual resource file like this, containing multiple icons/images: http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png or create multiple files with an individual file in each. It seems like it would be faster with a single file, because you have to only download a file once, but it would take time to adjust the background-position CSS attribute for each class in your CSS file. I am a little lost here, because I see different websites doing different techniques, and I am wondering which would be best.
Is it faster to create an individual resource file like this, containing multiple icons/images:
Share
This is called “CSS sprites”. As long as the single file is not so huge that it slows down the loading of the site, then it’s a good technique to use.
If these are the main UI items for the site, it’s worth the time to code them in CSS positons. It doesn’t really take that much longer to code and there are few files to deal with.
Example: http://skyje.com/2010/02/css-sprites/
Example: http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/