Geek Answers Handbook

CSS repeating background, sprite or 1px png

Good. I want to know what is best for performance with respect to 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 large blocks of the gradient block to use as the background image. This will increase the file size, but retain HTTP requests.

Love to hear your opinions ...

+4
source share
3 answers

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

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

It works for all modern browsers. For older IE browsers (e.g. IE6, IE7) you can overwrite styles with conditional comments.

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

Of course, this way you have to transcode the background if it has changed. But it will save a lot of requests.

+4
source

If you are talking about using these images for gradients, I would suggest using CSS gradients, then you don't need images at all.

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

No more images needed; only one HTC file (which is downloaded only by IE).

+3
source

Saving HTTP requests is always the best solution. But, nevertheless, you must monitor the size of the file so that it does not reach a large one. Then you should consider creating two or more images.

Take a look at the following tool, which makes it easy to create sprite images from unsolicited images:

http://spriteme.org/

+2
source

More articles:


All Articles