views:

66

answers:

2

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?

+1  A: 

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.

twerq
Therefore, if your goal is to reduce the number of requests to your pages, you should use data URIs in your main CSS file and then provide alternative sheets for <=IE7 which use sprites.
Rupert
+3  A: 

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.

Chuck
+1 Cross-browser compatability is an issue as well.
Josh Stodola
These are great points. I don't consider the 1 request that a sprite requires the drawback though. The primary drawback is having to make them, and remake them if you make edits.
Mark