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.
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=)
- (binary) images as data URI are slow, especially for mobile clients
- consider to use CSS sprites instead
- 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”