Take the 2-minute tour ×

I read this on Wikipedia:

Data URIs are not separately cached from their containing documents (e.g. CSS or HTML files) so data is downloaded every time the containing documents are redownloaded.

Does this mean that my code is downloaded every single time a page is refreshed or whenever the user clicks on a navigation link? What can I do to cache the data-uri's?

ps - i'm just talking about 20 or so small png files (mostly silk icons but 2 * 16KB files as well)

share|improve this question

1 Answer 1

up vote 10 down vote accepted

Data URIs are nothing more than text in the form of Base64-encoded binary data within your HTML and CSS files. So yes, they will be downloaded as part of your HTML and CSS files every time they're requested, unless those files are themselves cached.

If you keep your data URIs to just your stylesheets and send proper cache headers, caching your data: images together with your CSS shouldn't pose issues.

share|improve this answer
thanks, I totally get it now, the wikipedia remark made it sound like I wouldn't be able to do that. Cheers –  marflar Jan 25 '11 at 9:40
It means: data is always cached together with the containing document. If you make changes to either the data URI or the HTML/CSS which contains it, all of them have to be reloaded (since they reside in the same document) –  syockit Feb 27 '11 at 0:10
@sysockit is right. @stephenmurdoch, Please consider my Avoid Data URIs article before going all base64 on your assets :-) In essence, when you separate your encoded images by context to dedicated css files with MHTML fallback for IE you end up with bloated, hardly maintainable sprites. –  Ronny May 8 '11 at 22:17
@Ronny has a great article, but it looks like the url is changed. I found it via google at frontend.co.il/articles/avoid-data-uris-english –  Emil Lerch May 24 '12 at 23:59

Your Answer


