Data URI


TL;NR

A data URI contains:

  • BASE64 encoded binary data (exception exists)
  • MIME type
  • no more metadata such like filename

It can be used instead of real file.

A full definition at wikipedia.

Example

External links in this site are followed by a icon like this. This is implemented with a data URI in CSS.

Part of .sass stylesheet is like:

a[href^="http://"]:after, a[href^="https://"]:after
  content: " " url(data:image/png;base64,iVBORw0 ... ORK5CYII=)

Relevant posts

On Mobile, Data URIs are 6x Slower than Source Linking

  • (binary) images as data URI are slow, especially for mobile clients
  • consider to use CSS sprites instead

Data URI Performance: Don’t Blame it on Base64

  • SVG image can be included in data URI, either BASE64 encoded or not
  • encoded and not-encoded groups performed almost equally, and are still much slower than no-svg group
  • so BASE64 may not be the bottleneck
  • resource scheduling of data URIs is suspicious
  • examined with real user monitoring / RUM
    • monitor real usage of actual user
    • “passive monitoring”
    • wikipedia