A data URI is a URI that encodes bytes + content-type:
- 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.
content: " " url(data:image/png;base64,iVBORw0 ... ORK5CYII=)
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"