关于 Data URI Scheme -- data:image/jpg;base64

转载一篇大神的文章

大家可能注意到了，网页上有些图片的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:_①[<mime type>]_②[;charset=<charset>]_③[;<encoding>]_④,<encoded data>_⑤

 

①. data ：协议名称；

 

②. [<mime type>] ：可选项，数据类型（image/png、text/plain等）

 

③. [;charset=<charset>] ：可选项，源文本的字符集编码方式

 

④. [;<encoding>] ：数据编码方式（默认US-ASCII，BASE64两种）

 

⑤. ,<encoded data> ：编码后的数据

注意：

 

[a].  [<mime type>][;charset=<charset>] 的缺省值为HTTP Header 中Content-Type的字段值；

[b]. [;<encoding>] 的默认值为US-ASCII，就是每个字符会编码为%xx的形式；

[c]. [;charset=<charset>] 对于IE是无效的，需要通过 设置编码方式；而Chrome则是 属性设置编码无效，要通过 [;charset=<charset>]来设置；FF就两种方式均可。

[d]. 若 ,<encoded data> 不是以 [;<encoding>]方式编码后的数据，则会报异常

 

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浏览器都支持这种小文件嵌入。

 

网页中一张图片可以这样显示：

    <img src="http://mail.163.com/images/x.png" />  

 

也可以这样显示：

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NC
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无限制