17

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)

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
stephenmurdoch
  • 34,024
  • 29
  • 114
  • 189

1 Answers1

21

Data URIs are nothing more than text in the form of Base64-encoded binary data, that's embedded 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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • thanks, I totally get it now, the wikipedia remark made it sound like I wouldn't be able to do that. Cheers – stephenmurdoch Jan 25 '11 at 09: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 00:10
  • 2
    @sysockit is right. @stephenmurdoch, Please consider my [Avoid Data URIs](http://frontend.co.il/avoid-data-uris-en/) 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 08 '11 at 22:17
  • 2
    @Ronny has a great article, but it looks like the url is changed. I found it via google at http://frontend.co.il/articles/avoid-data-uris-english – Emil Lerch May 24 '12 at 23:59
  • @Ronny tl;dr "Data URIs don't work in IE and are a little bigger." – sam boosalis Oct 16 '20 at 01:50