浅谈 Data URI 与 BASE 64 编码

前言（废话）：鼓捣 Stylish 的时候发现了这么个奇怪的代码行：
Data:image/gif;BASE64,R0lGODlhEAAQAKEAAEKF9NPi/AAAAAAAACH5BAEAAAIALAAAAAAQABAAAAIkFI6Zpu0YYnxnAvtC0hTzzH3UJY6kSUqdiCltu7GjBKMKgwoFADs=
由于自己有点 HTML/CSS 基础，看得出来这是在引用图片，可是后面这么长一串乱码难道就是图片地址吗？经过漫长的查询（突破点是 BASE64，我记得这是种加密方式），我终于有所了解。下面是我的摘抄+个人笔记。

什么是 URI

　　注意，是 URI 而非 URL ， URL 是 uniform resource locator 的缩写，是一个特定资源的协议（用什么方式去获取数据）和地址的组合。每一个公开可访问的资源，例如图片，JS文件，HTML 文件或者样式表文件，都有一个 URL 告诉浏览器从哪里下载它们。浏览器会根据这个 URL 建立一个链接，并开始下载或执行这个文件。URL 其实也是个 URI ，URI 是 uniform resource identifier 的缩写。URI 指定了一个协议用来接收信息，包括一些关于资源的额外的信息。那些额外的信息可能是一个地址也可能不是（如果是的话，那么 URI 就是URL了），但是它总是跟一个特定的协议和有关联。而 Data URI 是 URI 的一种，它不包含地址，也就不是 URL 了。

Data URI 的格式

　　Data URI 的格式很简单，你可以参考 RFC 2397里的说明。

　　基本的格式如下：

Data:[<mime type>][;charset=<charset>][;BASE64],<encoded Data>

　　在这个格式中，Data：是 URI 的一种协议，声明这是一个 Data URI 。第二部分，MIME type，表明了要呈现的数据的类型。拿 PNG 图片举个例子，它的 MIME type 是image/png。如果没有指定，MIME type将会默认为 text/plain 。charset 是字符的集合，包含各国文字和一些特殊符号，也就是常说的编码，具体可参考这里。charset 在大多数情况下可以无视，对于图片来说它根本没用。下一部分指明了使用的编码，你不一定要用 BASE 64 编码。如果内容不是用 BASE 64 进行编码，那么这些数据就会使用标准的 URL 编码（对 URL 安全的ASCII字符将会保留原样显示，其他会显示成 %xx 格式的十六进制编码）进行编码。

Data URI 的缺陷

　　RFC2397 在定义 Data URI 的目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。这样除了减少 HTTP request 之外，还有个好处就是不用再多上传一张图片文件到 FTP 上，也就不会有图片失链的问题。

Data URI 也不是没有缺点 ——

BASE 64 编码后会使文件内容增加约 33% (虽然文件变大，但因减少 HTTP 额外产生数据量关系，实际是节省平宽的)
Data URI 不会被浏览器缓存，因此每次加载内容都需要重新被下载
内容如果更新，就需要重新产生一次编码
Data URI 会使代码看起来变得凌乱
大小限制，根据 Data URI 的规范，Data URI 有字符的限制，IE8 仅支持 32768 Bytes，约 32KB 左右
IE8 以下的浏览器不支持此定义，你得明白现在还是有很多国人在用 IE6

有关 BASE 64 编码

　　BASE 64 编码是一个编码规则，数据通过它被转化成二进制码，然后组合成一个 BASE 64 符号的序列。BASE 64 符号包括大写和小写的字母 A 到 Z，数字，符号 + 和 / 。= 号是用来填充用的，你可以参考维基百科上的说明。你真正需要知道的是 BASE 64 编码会使编码过的数据变得更小。

　　举个例子：

下面的例子是一张 GIF 图片用 BASE 64 进行编码后的 Data URI ：

Data:image/gif;BASE64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge 8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g 77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

同一张图片如果不用 BASE 64 编码的话将会如下显示：

Data:image/gif,GIF89a%22%00%1B%00%F7%00%00lll%D6%D6%D6%FF%EB%85 %FF%E0%7B%FF%F7%91%FF%D4o%DF%DF%DF%F6%F6%F6%87%87%87%FE %CBf%FF%F4%8E%E6%B3NKKK%C5%92-%FF%FF%99%FF%FF%FF%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%2C%00%00 %00%00%22%00%1B%00%00%08%A9%00%1F%08%1CH%B0%A0%C1%83%08 %13*%5C%C8%B0%A1%C3%87%10%23J%9CH%91%60%83%8B%0D%0C%1C %A8h%B0%81%C5%00%1B9%0A%F4%E8%A0%A4%83%07%181j%9C%D8%80 %80%82%97%2F%0B6%40%60%80%A5%00%01)s%AA%94%D8%60%80G%84 %02P%22%E0Y%A0%81%C9%A3%25%138h%00%80g%02%A3%04%A2J%8D %BA%60i%D3%88%0D%9E%3A%B8%C9%95kU%A6N%8D%0E%18Kv%EC%D7 %AB%10%B3%1A-%C0%B6-%5B%A3%60%23%1A%D0I%97%C1%D0%88%07 %02%20%00%C0%B7%AF_%00%08%02L%3C%60%20%80%E1%C3%88%03 %AC%14%C9%B8%B1%E3%C7%90%23K%9EL0%20%00%3B

注意：BASE 64 编码事实上会使图像变大。然而，如果你使用了 HTTP 压缩，那么你并不会察觉到有什么差异，因为 BASE 64 编码的数据的压缩性极好。如果因为某些原因不能使用 HTTP 压缩的话，那么你可能会想知道你发送的数据究竟有多大，然后权衡下是否值得这么做。

如何让 BASE 64 编码后的图片代码更简短？

　　主要方法是用 Image Optimize 进行压缩，Image Optimize 对 png 图片压缩会丢失透明信息，而 gif 图片不会，而且 gif 体积一般要比 png 的小，所以先用别的软件将 png 转换为 gif ，再用 Image Optimize 进行压缩。

在线工具：http://duri.me/

您可以参考：

http://www.cnblogs.com/lhb25/archive/2012/11/22/web-based-data-uri-generator-duri-me.html

http://www.cnblogs.com/FlyCat/archive/2013/04/01/2994269.html

http://ntesmailfetc.blog.163.com/blog/static/2062870612012453590711/