首页 > 代码库 > 浅谈 Data URI 与 BASE 64 编码

浅谈 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/

<style></style>