什么是Data URI

Data URI

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

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

其实总体能够视为三部分，即声明：参数+数据，逗号左边的是各类参数，右边的是数据。

声明：data:是URI的协议头，代表其资源是一个data URI；

参数：MIME type，表示数据呈现的格式，即指定嵌入数据的MIME。对于PNG的图片，其格式是：image/png，若是没有指定，默认是：text/plain；character set(字符集）大多数被忽略，默认是：charset=US-ASCII。若是指定是的数据格式是图片时，字符集将再也不使用；base64，这一部分将代表其数据的编码方式，此处为声明后面的数据的编码是base64，咱们能够没必要使用base64编码格式，若是那样，咱们将使用标准的URL编码方式（形如%XX%XX%XX的格式）；

数据：这个encoded data部分为实际的数据，可能包含空格，可是可有可无。

优势和缺点

这两点相信你们都看眼烦了，那就把我认为重要的say下喽。

优势：

减小HTTP请求数
避免了图片从新上传，清理缓存的问题
运用在模版环境中时，省去了拷贝图片的步骤
……

缺点：
1.没法重复利用。img虽然是一个请求数，可是加载完后，若是还有N次引用，那还1，而DataURI却必须是N次了；
2.图片等资源转换为DataURI所用的Base64编码以后，文件大小增长了好多（一般50%-300%），想一想下，若是服务器端不作Gzip压缩的话，那不是要……，压缩后却是跟本来的差很少大小；
3.加载、解码后渲染，消耗内存和CPU，手机上还得耗电池呢啊；
4.浏览器限制；
5.这个也是最可气的，那么一大长串编码无疑是对本身优雅代码的一个摧残啊，有代码洁癖的你能忍么？
6.……

如何得到图片的base64编码

在网上搜了几个在线的图片转义为base64的，缺发现没几个好用的，并且记不住网址，下面推荐一个，http://www.pjhome.net/web/htm...（原版的），最初见到的是在飘飘那里：http://labs.pufen.net/my_coll...。

固然，这么好的东西本身也必需要收藏一份儿了啊，格桑的博客的地址http://aiyouu.net/tools/datau...，用的时候方便啊，有空了再改造下。

哦，忘了说怎么用了，直接把图片拖到页面里面就能够了。

手机端DataURI比外链资源慢6倍

很久以前（那时候我还在上学）鬼哥写过DataURI会多消耗53%左右的CPU资源，内存多出4倍左右，耗时平均高出24.6倍，那手机上呢？

mobify最新的测试数据：DataURI要比简单的外链资源要慢6倍。

详情点击访问：mobify

使用建议

sprite能用还得用啊，DataURI的方法要慎用，对于Webapp，仍是研究各类缓存技术；
个别不能sprite且质量小的图片能够用DataURI
对个别BT需求时能够用来作为替代img的方案
……（期待你来补充的哦）

最后：URI，不是URL

若是不仔细看，真的会误把data URI当作data URL，而后用URL的方式去理解URI，其实否则！

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

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

文章转载于http://aiyouu.net/data-uris-e...

参考扩展阅读：
1.关于base64编码的原理及实现（表示迷糊）
2.Data URIs
3.Data URI&MHTML: 用仍是不用？
4.Data URI的利弊
5.手机端DataURI比外链资源慢6倍
6.译文：data URI，不是URL啊
7.原文：Data URIs explained