Data URI Scheme -- data:image/jpg；base64是什么

大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：

https://img-blog.csdnimg.cn/2022010705410244625.png

     

什么是DATA URI Scheme呢？其实就是形如 data:image/jpg;base64,XINGSXXIANGJIJIGSAG== 的资源链接，一般出现在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是无效的，需要通过charset 设置编码方式；而Chrome则是charset 属性设置编码无效，要通过 [;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="https://img-blog.csdnimg.cn/2022010705410244625.png" />

优点：
当访问外部资源很麻烦或受限时
当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时。
当图片的体积太小，占用一个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无限制