One downside that hasn't been mentioned so far, as far as I can tell: the conflict between caching and downloading unneeded image data.
If you use image 1 on pages A & B and not page C, but image 2 on pages A & C but not B, you face a dilemma.
- If you stuff it all in one big CSS file, visitors to B (C) will download image 2 (1), even though it's never shown.
- If you split the CSS in 2, with A including both and B & C including only one each, you'll have an extra request in A, and require duplication or a third file if B & C share style rules
- If each page serves its own CSS file, you have only 1 request but it (and the image data) won't be cached across pages.
This restricts this technique to images that are used all over the place or images that are tiny.
You would have exactly the same issue when applying CSS sprites... the only difference here is including the image data in the CSS file rather than a separate sprite file - removing the need for another HTTP request.
If you use image 1 on pages A & B and not page C, but image 2 on pages A & C but not B, you face a dilemma.
- If you stuff it all in one big CSS file, visitors to B (C) will download image 2 (1), even though it's never shown.
- If you split the CSS in 2, with A including both and B & C including only one each, you'll have an extra request in A, and require duplication or a third file if B & C share style rules
- If each page serves its own CSS file, you have only 1 request but it (and the image data) won't be cached across pages.
This restricts this technique to images that are used all over the place or images that are tiny.