base64原理浅析

编者按：本文作者高峰，360奇舞团前端工程师，W3C性能工作组/WOT工作组成员。

前言

上一次，我写了一篇《Data URL的简介与使用》(http://verymuch.site/2017/12/14/Data-URL%E7%AE%80%E4%BB%8B%E4%B8%8E%E4%BD%BF%E7%94%A8/)，该文章主要介绍了什么是Data URL，其优缺点以及如何使用。其中有一个隐含在文中的重要概念，那就是Data URL是Base64编码的，且Base64编码的数据体积通常是原数据的体积4/3。

不知道大家会不会有这样的疑问：

1. 为什么图片转成Base64编码，就可以直接内联到HTML中显示呢？

2. 为什么Base64编码后，体积会增大1/3呢？

如果你对此也有疑问的话，就往下一看究竟吧。

为什么Base64编码可以内联到HTML中？

我们知道HTTP协议是文本协议，不同于常规的二进制协议那样直接进行二进制传输。Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。