Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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 datauri, and which one would you allow to be downloaded?

I want the page to be extremely fast!

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.