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

浅谈 Data URI 与 BASE 64 编码

2024-07-13 02:07:04   222人阅读

前言（废话）：鼓捣 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>


联系
我们