在Hexo中使用base64化图片资源

目标

将不会重复使用的图片直接放入html文件中。

环境

Hexo v4.2.0

解决方案

考虑到图片并不会重复使用，因此希望图片可以直接放在html文件内，这样就不需要额外创建文件夹。恰巧前几天在某小程序的开发交流群里看到有人提到图片的base64化，于是决定将仅使用一次的图片使用base64的处理，直接放入网页文件内。

1. 在本地将图片文件进行压缩，在符合图片质量要求的前提下尽量减小图片体积；

2. 通过本地/在线工具将图片进行base64转码，得到相应代码。

   例如：

   data:image/png;base64,***********
   

3. 将得到的代码放入Hexo的*.md，*.html或*.css文件中。

   3.1. *.md文件中使用以下方式插入：

   ![alt](data:image/png;base64,**********)
   

   3.2. *.html文件中使用如下方式插入：

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

   3.3. *.css文件中使用如下方式插入：

   url(data:image/png;base64,**********)
   

不足之处

base64化图片后文件体积会增加30%左右，且会使网页文件体积增加，影响加载速度。使用外链时网页和图片加载可以同步进行，速度更快，体验更好。

此外base64还有浏览器兼容性问题。

使用原因

1. 文件仅使用一次，不重复使用，这样直接放入文件内更简单；
2. 图片文件相对较小，即便增加30%的文件大小，也不会造成很大影响。

参考资料

[1] 图片资源Base64化在H5页面里有用武之地吗？

[2] 前端开发中，使用base64图片的弊端是什么？

[3] base64在线转换工具