CSS sprites vs data URIs

Question

I've heard a lot about the importance of using sprites in order to get your request count down. But my thinking is that rather than use sprites, you can use URIs to accomplish the same thing, and much easier (no sprite creation needed).

Is it better to use sprites or uris?

Answer 1

Base64-encoded data is about 1/3 larger than raw bytes, so on pages where downloading all the image data takes more than three times as long as making a request, CSS sprites are superior from a performance basis.

Also, inline data URIs make the file itself take as long to load as the actual data plus the base64-encoded images. If the data URIs are on your actual HTML page, that means rendering stops and waits for the image to load. If the data URIs are in your stylesheet, that means any rules after the data URI have to wait for it before they can be processed. On the other hand, with a sprite file, the images can load concurrently with your other resources. That may be worth the cost of one extra request, especially when you factor in the base64 penalty.

Answer 2

I suppose that support for IE5, 6 and 7 would be a good reason to use sprites over URIs, if those targets are important to you.