什么是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