CSS sprites instead of images?

Question

Looking at the code for some large websites (as I sometimes do), I noticed that some of the large websites (YouTube and Yahoo were the ones I looked at) seem to use CSS sprites for almost everything and are unlikely use any tags at all.

Is this usually considered good practice? I would think that using a tag would be better because of the alt attribute, although if the sprinter image is used to link to something, you can use the blank image to create the link and then specify the alt attribute (youtube logo in the upper left corner uses this technique) and have both the speed of using sprites and the availability of using a tag.

What about using sprites for images that are not used for links? Can you just use the same technique as youtube, except without a tag, and get the best of both?

And does anyone often use sprites when designing websites? I know that you get performance bonuses using them (fewer HTTP requests and all), but is it getting terrible to administer a site where many of your images are in one massive image?

Answer 1

You need to separate the images that are the content and the images that adorn.

Decorative images , such as icons, gradients, or shadows, can be placed inside sprites. This is best practice in terms of performance, as it saves the number of HTTP requests that the browser must make before rendering is ready. I must admit that this is tired of supporting. But as long as you combine only the same images, all the icons in one file, this is not so bad. An alternative to sprites is to use uri: s data and embed images in a CSS file, but this doesn’t work well with IE7, the slowest browser. So I would say CSS sprites are still the best way to go if you need IE7 support.

Content images must be in HTML, with a suitable set of text for text, so that assistive technologies (and Google) can read the content as they see fit.