字符=>二进制
计算机中所有数据的存储都是以二进制模式，比如想要存储abcd需将其转化为二进制，具体用哪些二进制来表示哪个符号*，有一个统一的编码规则，这就是ascii。
ASCII 码使用指定的7 位或8 位二进制数组合来表示128 或256 种可能的字符。（2的八次方=256，8个bit可以用来表示0-255）
0-127可以表示大小写的26个字母、加减乘除符号、阿拉伯数据还有控制字符比如换行符等。
观察百度百科上的ascii码表（128个字符）可以发现第八位都是0，等于没用第八位。因为英语中128个字符即可表示所有。
ascii大小规则
0-9<A~Z<a-z。
但如果是其他语言，比如法语128个不够。于是欧洲国家决定启用闲置的第八位，这样就有256个了。不过不同的国家有不同的字母，后128位同一编码在不同语言中代表不同的字符。注意前128位是一样的。
至于亚洲国家比如汉字就太多了，一个字节不够，必须采用多个字节代表一个符号。比如，简体中文常见的编码方式是GB2312，使用两个字节表示一个汉字，所以理论上最多可以表示 256 x 256 = 65536 个符号。
二进制=>字符
ascii码的128～255之间的值是不可见字符。而在网络上交换数据时，比如说从A地传到B地，往往要经过多个路由设备，由于不同的设备对字符的处理方式有一些不同，这样那些不可见字符就有可能被处理错误，这是不利于传输的。所以就先把数据先做一个Base64编码，统统变成可见字符，这样出错的可能性就大降低了
01000100010011101100111010111100011001010…那么我们取6个比特为一组，计算它的ascii值，得到一个字符，这个字符肯定是可见字符，好，把它对应的字符写出来，再取6个比特，计算…，如此下去，直到最后，就完成了编码。
标准base64只有64个字符（英文大小写、数字和+、/）以及用作后缀等号。如下为base64对照表。注意和ascii表是不一样的！
6bit为一组，那么4个base64字符即表示了24bit，即3个字节（24/8=3）。可理解为，原先用二进制只需要3个字节表示的信息，用base64却要占4个字符（即四个字节）。
有点绕，举例吧
- 转换前 10101101,10111010,01110110 （二进制）
- 转换后（每六个为一组转为ascii码，ascii码就是8位的二进制）00101011, 00011011 ,00101001 ,00110110 （二进制）
- 十进制：43 27 41 54
- 对照base64表转为可见字符： r b p 2
计算机存储信息都是按ascii码来的，所以这四个字符在ascii码中是四个字节。原先3个字节的信息现在占位4个字节了，所以base64传输会使得信息变大， 为原来的4/3
图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串表示图片，从而无需图片地址。
这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的。
比如下图的图标
浏览器解析html到灰色标注的img那里，就会向src所在地址发一个请求，请求这个图片，下图即为发出的请求。
不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 就可以。这里等于把图片变为一串编码，直接嵌在html里传递给了浏览器，浏览器不用再次请求图片了。
举个栗子。www.google.com 的首页搜索框右侧的搜索小图标使用的就是base64编码。我们可以看到：
//在css里的写法
#fkbx-spch, #fkbx-hspch {
background: url(https://img-blog.csdnimg.cn/2022010706012410164.gif) no-repeat center;
}
//在html代码img标签里的写法
<img src="https://img-blog.csdnimg.cn/2022010706012410164.gif">
上面分别是图片的 base64 编码在 css 里面的写法和在 html img 标签里的写法。base64 编码长得就是这个样子，随着html一起被发送给浏览器了。
以一张图片为例子
该图片大小为51kb
转为base64变成68295个字符，比原来大了。也就是说，图片被编码之后，生成的字符串编码大小一般而言都会比原文件稍大一些。即便 base64 编码能够被 gzip 压缩，压缩率能达到 50% 以上，想象一下，一个元素的 css 样式编写居然超过了 60000个 字符，那对 css 整体的可读性将会造成十分大的影响，代码的冗余使得在此使用 base64 编码将得不偿失
比如有一个是我们经常会遇到的，就是页面的背景图 background-image 。在很多地方，我们会制作一个很小的图片大概是几px*几px，然后平铺它页面当背景图。因为是背景图的缘故，所以无法将它放入雪碧图，而它却存在网站的很多页面，这种图片往往只有几十字节，却需要一个 http 请求，十分不值得。那么此时将它转化为 base64 编码
雪碧图介绍：css雪碧图及优缺点
CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
还有一种是iconfont，将图标转为svg。缺点是颜色是单一在css中设置的（像字体一样），ui给的炫酷图标无法用。而且如果想换个图标，还得跑阿里库上更新图重新生成压缩包。
iconfont使用在这里vue中阿里图标库iconfont的设置
所以，要有取舍地使用base64。正常比较大的图片，都不可用base64，因为塞进css里增大css文件阻塞渲染。base64适用于极小极简单的图片。
