What's the threshold for creating data URI in css?

Question

I'm interested in benchmarking, or best practices.

I have 10 icons on my website. They are all background:url(…) no-repeat;. Assuming sprites are not the answer (for any god given reason) how big or how small a file would you place directly in data URI, and which one would you allow to be downloaded?

I want the page to be extremely fast!

Answer 1

The data URI limit is set by the browser that is viewing your site.

• Internet Explorer 6 and 7 does not support Data URI.
• Internet Explorer 8 has a Data URIs limit of 32KB
• Internet Explorer 9 has no Data URI limit.

PNG Sprites are better than Data URI

Personally PNG sprites are the way forward because with PNG sprites the Caching is far Superior since you can set the expire weeks ahead awhile a CSS caching should be much lower if you intend to add to it on a daily, to weekly basis. Furthermore iPhones and iPads will not cache files when they are X Big.

• The iPad caches files up to 25.6KB. (first ipad)
• The iPhone 3GS caches files up to 51.199KB.
• The iPhone 4 caches files up to 102.3KB.

It's not all about lowering the requests (Though it is a major one)

So while lower requests do help the page load speed its also good to know the limitations and the actual speed of all devices - since web page speed tests do not test every environment and device.