首次接触Base64是在两年前，B站UP主苏星河牛通发布了一个关于快捷指令的视频，视频中通过对音频进行编码与解码，实现充电时播放贾维斯充电语音。

视频如下：

当时Base64这种编码格式就给我留下了深刻的印象，直到最近，它又一次进入了我的视野。

0 背景

前段时间，通过借用Blogger自定义域名，搭建了一个博客，但由于Blogger使用的是谷歌的服务，图片无法访问，当时使用的是通过图床实现正常访问。

后来又发现，文章中的图可以正常访问，但封面图依旧加载不出来。发现是由于谷歌会转换生成封面的缩略图，封面图走的还是谷歌的服务器，因此才会有无法加载的问题。

解决封面无法加载问题最简单的方法就是文章的第一张图片以Base64格式插入。

这就是再次接触Base64这种编码的契机。

1 Base64的简介

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，它基于64个可打印字符来表示二进制数据。

由于 \log_264 =6，所以每6个位元为一个单位，对应某个可打印字符。3个字节相当于24个位元，对应于4个Base64单元，即，3个字节可由4个可打印字符来表示。

在Base64中，可打印字符包括字母A-Z、a-z数字0-9这62个字符，以及另外两个字符（因在不同系统中而不同）。

采用Base64编码具有不可读性，需要解码后才能阅读。

2 Base64的编码与解码

编码解码的原理不再介绍，这里推荐几个工具/网站。

https://base64.us/
https://c.runoob.com/front-end/693/
http://www.jsons.cn/img2base64

3 Base64的使用方法

png格式图片在HTML中显示的方法

<img src="data:image/png;base64,******"/>

其他格式的使用方法

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS 代码
data:text/css;base64,base64编码的css代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

4 总结

采用Base64编码很好地解决了无法显示封面图的问题。

直接把图像文件的内容写在了HTML文件中，这样做还有一个好处是节省了一个HTTP请求，但坏处就是浏览器不会缓存这种图像，每次进入网页都需要重新加载。