酷应用

Base64 编码知识，一文打尽！

百家作者：又拍云 2022-05-13 21:47:30

现在网站为了提升用户的浏览体验越来越多的使用了图片，而这些图片通常以 Base64 的形式存储和加载。因此各位开发工程师肯定对 Base64 毫不陌生了，那么你知道 Base64 究竟是什么，为什么要使用 Base64，以及 Base64 的优缺点吗？

什么是 Base64

Base64 是网络中存储和传输的二进制数据的普遍用法。Base64 一个字节只能表示 64 种情况，且编码格式每个字节的前两位都只能是 0，使用剩下的 6 位表示内容。

看到这里相信大家也能够意识到，这种编码格式无法充分利用存储资源，效能较低。那为什么还会成为网络中的普遍用法呢？

其实 Base64 最早是应用在邮件传输协议中的。当时邮件传输协议只支持 ASCII 字符传递，使用 ASCII 码来表示所有的英文字符和数字还有一些符号。这里有一个问题，如果邮件中只传输英文数字等，那么 ASCII 可以直接支持。但是如果要在文件中传输图片、视频等资源的话，这些资源转成 ASCII 的时候会出现非英文数字的情况。而且邮件中还存在很多控制字符，这些控制字符又会成为不可见字符。非英文字符和控制字符在传输过程中很容易产生错误，影响邮件的正确传输。为此才有了诞生了一个新的编码规则，把二进制以 3 个字节为一组，再把每组的 3 个字节（24 位）转换成 4 个 6 位，每 6 位根据查表对应一个 ASCII 符号，这就是 Base64。

△ Base64 索引表

Base64 将 8 位为一个单元的字节数据，拆分为 6 位为一个单元的二进制片段。每一个 6 位单元对应 Base64 索引表中的一个字符。简单举个例子，下图中 M 的 ASCII 码是 77 , 而转换为二进制后前六位二进制对应值为 19，为 Base64 字典中的 T。

当然这里也会有一个问题，如果要编码的二进制数据不是 3 的倍数，那就会剩下一至二个字节。为此 Base64 使用 000000 字节值在末尾补足，使其字节数能够被 3 整除，补位用 = 表示，= 的个数可表示补了多少字节，并在解码时自动去除。总体来看相比编码前，Base64 编码后的字符增加了约 33%。

图片的 Base64 编码

前面我们也提到了 Base64 编码是现在网站小图片的主要加载方式，那 Base64 到底是如何处理图片的呢？

我们都知道图片在网页中的使用方法通常是使用 img 标签的形式，而 img 标签的 src 属性会指定一个远程服务器上的资源。在网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求。但是这是非常占用网络资源的，而且因为大多数浏览器都有并发请求数的限制，如果你的网页中嵌入了过多外部请求，就很容易出现页面加载速度过慢的情况。