Looking at the code for some big websites (as I sometimes do) I noticed that a few of the big websites (YouTube and Yahoo were the two I looked at) seem to use CSS sprites for pretty much everything, and hardly use any tags at all.
Is this generally regarded as good practice? I would have thought using the tag would be better to use due to the alt attribute, although if the sprited image is used to link to something you can use a blank image to create the link and then give that an alt attribute (the youtube logo in the top left hand corner uses this technique) and have both the speed of using sprites and the accessibility of using an tag.
Although what about using sprites for images that aren’t used for links? Can you simply use the same technique youtube uses except without the tag, and get the best of both?
And does anyone use sprites extensively when developing websites? I know you get performance bonuses by using them (less HTTP requests and all) but does it become horrible to admin a site where a lot of your images are in one massive image?
You have to separate images that are content, and images that are decoration.
Decorational images, such as icons, gradients, or shadows, can be put inside sprites. This is best practice performance-wise, since it save the number of HTTP requests the browser has to do before it’s ready rendering. It is annoying to maintain, I have to admit. But as long as you only group similar images together, all icons in one file, it’s not THAT bad. An alternative to sprites is using data uri:s, and embed the images in the CSS-file, but that doesn’t work well with IE7, the slowest browser. So I would say CSS sprites is still the best way to go if you need IE7 support.
Content images, should be in the HTML, with proper alt text set, so that assistive technologies (and Google), can read the content as it should.