large stylesheet or smaller version with http requests

I have made 开发者_运维知识库changes recently to include base64 data uri strings in my css instead of image requests to external image files.

The issue this has caused is the increase in size from a stylesheet without data uri of 7KB to that 200KB+ with them. However I have significantly less http requests.

Is this ok - is the approach of large stylesheet better than one with multiple image requests?

Compare the size of the stylesheet to the total size of the images you base64'd. If it is the same or smaller, using the base64 URIs takes up less space (and download time). Generally, one large request is preferable over multiple smaller requests if the data being retrieved is identical and said requests are not concurrent.

200Kb is quite big for a stylesheet. Make sure you're serving it compressed if you're not already. If some/most of the data string images aren't used on most pages you might be better off splitting those into a separate stylesheet and including it only on pages where required.

How about you keep one stylesheet at the top of your document (in the head) that contains everything except for your base64 data. This will load quickly, and let the body of the document begin to load/display with these initial styles.

Then, create a second stylesheet at the bottom of the document (right before the closing /body tag) which contains the images as base64 data. That way, when this starts to load, at least the content is visible and mostly structured the way you want it.

Win-win??

Good luck!

Less requests, the better. However, hostings limit the connection speed of a particular download stream. So, if your 200KB file can be downloaded in 2 secs, maybe 2 files of 100KB could be downloaded in 1 sec. The rest is on you.

ADDED: You can't gain any size reduction using compression. Your image data can't be compressed.