4

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

1. Use many different 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...

wilsonpage
  • 17,341
  • 23
  • 103
  • 147
  • 2
    You might want to test browser rendering performance on 1px images versus, say, 10px images. Some browsers certainly used to be slower when rendering 100 1px background images, versus 10 10px background images (more sluggish when scrolling, etc.) But I've not tried it recently, so that might be a thing of the past. – Matt Gibson Jul 01 '11 at 11:18
  • This depends on what your background images look like. – Pekka Jul 01 '11 at 11:21

3 Answers3

4

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.

Vladimir
  • 447
  • 2
  • 6
3

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).

Spudley
  • 166,037
  • 39
  • 233
  • 307
2

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/

Fender
  • 3,055
  • 1
  • 17
  • 25
  • addition: i depends on your background-repeat value whether you can sprite your images (but I'm sure you knew that before ;-) ) – Fender Jul 01 '11 at 11:14
  • How big is too big for an image sprite? – wilsonpage Jul 01 '11 at 11:16
  • i don't think that this is too big. but it depends on many different things. Think of a big background sprite downloading with 64kbit/s then you can't see a background until the whole images is loaded, so here it would be better to see a progress, like appearing background images :) – Fender Jul 01 '11 at 11:27
  • 1
    i recommend you to try SpriteMe (link is in the answer) it creates the image for you and shows you the saving of using the sprite. it also respects the problems of sprites and does not create one if it is not useful – Fender Jul 01 '11 at 11:32