Data URI详解

Data URI,不是URL

URL是uniform resource locator的缩写,在web中的每一个可访问资源都有一个URL地址,例如图片,HTML文件,js文件以及style sheet文件,我们可以通过这个地址去download这个资源。

其实URL是URI的子集,URI是uniform resource identifier的缩写。URI是用于获取资源,包括其附加的信息的一种协议。附加信息可能是地址,也可能不是地址,如果是地址,那么这时URI就变成URL了。注意的是data URI不是URL,因为它并不包含资源的公共地址。

Data URI

Data URI 是由 RFC 2397 定义的一种把小文件直接嵌入文档的方案。基本的格式如下:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

其实整体可以视为三部分,即【声明】:【参数】+【数据】,逗号左边的是各种参数,右边的是数据。

声明:
data:是URI的协议头,表明其资源是一个data URI;

参数:
1:mime type,表示数据呈现的格式,即指定嵌入数据的MIME。对于PNG的图片,其格式是:image/png,如果没有指定,默认是:text/plain;

2:character set(字符集)大多数被省略,默认是:charset=US-ASCII。如果指定是的数据格式是图片时,字符集将不再使用;

3:base64,这一部分将表明其数据的编码方式,此处为声明后面的数据的编码是base64,我们可以不必使用base64编码格式,如果那样,我们将使用标准的URL编码方式(形如%XX%XX%XX的格式);

注:base64是一种编码方式,将数据变成位流(bit stream),然后将其映射到base64的集合内。

base64包含A-Z,a-z,自然数以及+,/符号。等号=表明我们需要进行位填充(padding)。

数据:
这个encoded data部分为实际的数据,可能包含空格,但是无关紧要。

例如:data:image/png;base64,iVBORw0KGgoAAAA…/5AhVEMnSs9MAAAAASUVORK5CYII=

Data URI支持的类型有:

  • 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图片数据

所以,这就是为什么我开始要先说明是Data URI,不是URL;因为只有当附加信息为文件(图片,HTML文件,js文件以及style sheet文件)时,才可以将它理解为URL;而附加信息并非只可以为【文件】,也可以是【文本数据】;

例1:(文本数据)

data:text/plain;base64,bXkgbmFtZSBpcyBKaW9uZy4=

data:text/plain;charset=utf-8;base64,5biV5ouT6YCK5Y+85Y+855qE
例2:(图片数据)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7ElEQVQ4Ed2TLY7DMBBGP/cEvYFpWY+wZT5CjhDoHqMscKHDCgO7LMsCCx2WFhm6rPCrnB81srOVumSljWRFtue9GY1tYUlu8MuvLbEKaFsKCPHeKNshaS+I80tdw7kaWsY76TwVKIOvww7r2wXtFYAysL5DlW9TOqyEHlgDAiBUwcaT965iLsc1mbFoHMk7uyrnNsQBNAPIp0B98hxgd6Ke4DE4AKpo2GtGeSLQlaOfZ57BfXUAZXak9Z5N8bFQwQIwgUv/qYKoiRq1J8gfhjVJIyPBsH/73if3Yjr32LAoiINezf+BQPz5a3wA3EDHM/SuNwwAAAAASUVORK5CYII=

优点

1:减少HTTP请求数,没有了TCP连接消耗和同一域名下浏览器的并发数限制。

2:对于小文件会降低带宽。虽然编码后数据量会增加,但是却减少了http头,当http头的数据量大于文件编码的增量,那么就会降低带宽。

3:对于HTTPS站点,HTTPS和HTTP混用会有安全提示,而HTTPS相对于HTTP来讲开销要大更多,所以Data URI在这方面的优势更明显。

4:可以把整个多媒体页面保存为一个文件。

5:当图片是在服务器端用程序动态生成,每个访问用户显示的都不同时

缺点

1:无法被重复利用,同一个文档应用多次同一个内容,则需要重复多次,数据量大量增加,增加了下载时间。

2:无法被独自缓存,所以其包含文档重新加载时,它也要重新加载。

3:客户端需要重新解码和显示,增加了点消耗。

4:不支持数据压缩,base64编码会增加1/3大小,而urlencode后数据量会增加更多。

5:不利于安全软件的过滤,同时也存在一定的安全隐患。

6:移动端不宜使用 Data URI 技术(解码耗 CPU)。

7:不利于维护

注:A:通过CSS样式文件使用Data URI。

B:使用gzip压缩后的最终数据量是(1 + 1/3) * 2 * (1/3) = 8/9,所以最终流量是减少的。

使用方式

1:嵌入文档使用,例如:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7ElEQVQ4Ed2TLY7DMBBGP/cEvYFpWY+wZT5CjhDoHqMscKHDCgO7LMsCCx2WFhm6rPCrnB81srOVumSljWRFtue9GY1tYUlu8MuvLbEKaFsKCPHeKNshaS+I80tdw7kaWsY76TwVKIOvww7r2wXtFYAysL5DlW9TOqyEHlgDAiBUwcaT965iLsc1mbFoHMk7uyrnNsQBNAPIp0B98hxgd6Ke4DE4AKpo2GtGeSLQlaOfZ57BfXUAZXak9Z5N8bFQwQIwgUv/qYKoiRq1J8gfhjVJIyPBsH/73if3Yjr32LAoiINezf+BQPz5a3wA3EDHM/SuNwwAAAAASUVORK5CYII=">
注:这种方法避免了一次HTTP请求,但却无法被浏览器缓存,每次使用时都需要重新加载一次!

2:通过CSS样式文件,例如:

.img_box {  
          width: 100px;
          height: 100px;
          border: 1px solid gray;
          padding: 10px;
          background-image:
          url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7ElEQVQ4Ed2TLY7DMBBGP/cEvYFpWY+wZT5CjhDoHqMscKHDCgO7LMsCCx2WFhm6rPCrnB81srOVumSljWRFtue9GY1tYUlu8MuvLbEKaFsKCPHeKNshaS+I80tdw7kaWsY76TwVKIOvww7r2wXtFYAysL5DlW9TOqyEHlgDAiBUwcaT965iLsc1mbFoHMk7uyrnNsQBNAPIp0B98hxgd6Ke4DE4AKpo2GtGeSLQlaOfZ57BfXUAZXak9Z5N8bFQwQIwgUv/qYKoiRq1J8gfhjVJIyPBsH/73if3Yjr32LAoiINezf+BQPz5a3wA3EDHM/SuNwwAAAAASUVORK5CYII=");  
         } 
注:这种方法避免了一次HTTP请求,还能同CSS文件一起被浏览器缓存起来,重复使用,不会每次使用时都加载一次。

浏览器支持情况

1) Firefox 2+

2) Opera 7.2+ – 数据URI不得超过4100个字符

3) Chrome(所有版本)

4) Safari(所有版本)

5) Internet Explorer 8+ – 数据URI必须小于32 k

性能的影响

Data URI最有兴趣的一点是它允许让你在文件中嵌入其他的文件。许多新手将图片嵌入在CSS文件中来作为一种提高性能的方式。实际上,有许多研究表明,HTTP请求是很多网站性能黑洞,能减少HTTP请求从某种意义上讲是可以提高性能的。“Minimize the HTTP request”也恰好是Yahoo的准则。

但是很多研究也表明,Data URI的滥用反而会适得其反:
1:base64下载速度较慢
2:base64在css下载完成前一直处于“白屏”状态
3:使用Data URI方式的Demo在渲染时会比不使用时多消耗53%左右的CPU资源,内存多出4倍左右,耗时平均高出24.6倍 。由此可见,使用Data URl方式还是需要更多的考量,在可接受的范围内适量使用。


参考:

那么我们应该在什么情况下来使用Data URI呢?详见下文:

Data URI使用建议

1:建议开发者限制Data URI在较小资源上的使用,并且不要在CSS或内联HTML里多次使用。

2:能使用sprite的地方还是尽量使用sprite。

3:个别不方便使用sprite且质量小的图片可以使用data uri,比如 – 宽高不固定且又有要求background-position:center bottom。

4:repeat/repeat-x/repeat-y的图片。

5:对个别BT需求时可以用来做为替代img的方案。

base64在线生成工具

1:图片在线转换Base64

2:Data URI编码工具

3:Data URI Maker

觉得不错,赞助我:




0