转载一篇大神的文章
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：
data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/7gAOQWRvYmUAZMAA= //这是随便写的，不要访问
什么是DATA URI Scheme呢？
其实就是形如data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAOQWRvYmUAZMAA=的资源链接，
一般出现在img元素的src属性。Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，
从而不用再从外部文件载入，减少请求资源的链接数。上面的DATA URI Scheme中 base64, 后的字符就是经过base64编码后的数据，浏览器会对其解码并渲染该图片资源。
data:①[]②[;charset=]③[;]④,⑤
①. data ：协议名称；
②. [] ：可选项，数据类型(image/png、text/plain等)
③. [;charset=] ：可选项，源文本的字符集编码方式
④. [;] ：数据编码方式(默认US-ASCII，BASE64两种)
⑤. , ：编码后的数据
注意：
[a]. [][;charset=] 的缺省值为HTTP Header 中Content-Type的字段值；
[b]. [;]的默认值为US-ASCII，就是每个字符会编码为%xx的形式；
[c]. [;charset=]对于IE是无效的，需要通过设置编码方式；而Chrome则是属性设置编码无效，要通过[;charset=]来设置；FF就两种方式均可。
[d]. 若 ,不是以[;]方式编码后的数据，则会报异常
Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码，如
echo base64_encode(file_get_contents(‘wg.png’));
.目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
网页中一张图片可以这样显示：
也可以这样显示：
SVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA
/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpb
WUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29y
a3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/
zPvcnAAAAAElFTkSuQmCC" />
优点：
当访问外部资源很麻烦或受限时
当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时。
当图片的体积太小，占用一个HTTP会话不是很值得时。减少资源请求链接数。
缺点：不会被浏览器缓存起来，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。
Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
移动端性能比http URI scheme低。
支持
Opera 7.2+ data URI 必须小于4100字符
IE8+ data URI必须小于32k(IE8不支持js的data URI)
Chrome、FF和Safari无限制
