CSS repeating background, sprite or 1px png

Ok I want to know what is the best practice for performance regarding CSS background images and http requests.

1. Use many diffe开发者_StackOverflow中文版rent 1px png background images resulting in several individual http requests

OR

2. Use one large image sprite with big gradient block chunks for use as background image. This will increase file size but save on http requests.

Love to hear you opinions...

---

I think it would be better to use data:uri technique for small images (like 1px-backgrounds).

background: url(data:image/png;base64,....) top left repeat-x;

It works for all modern browsers. For old IE browsers (like IE6, IE7) you can overwrite styles by conditional comments.

background: url("path/to/background.png") top left repeat-x;

Of course this way you have to re-encode background, if it has changed. But it saves a lot of requests.

---

If you're talking about using these images for gradients, I'd suggest using CSS gradients, then you won't need any images at all.

Of course, the obvious problem with CSS gradients is that it isn't supported by older versions of IE. The good news is that there is a fix for IE called CSS3Pie that allows it to support the standard CSS gradients feature (along with several other useful CSS features.

No more images required; just one HTC file (which only gets downloaded by IE).

---

saving http requests is always the better solution. But nevertheless you should watch the file size, so that it does not get to big. Then you should consider making two images or more.

Look at the following tool which allows the easy creation of sprite images from unsprited images:

http://spriteme.org/