Base64是一种用64个字符来表示任意二进制数据的方法；
在网络中，base64编码后的文件可以通过http协议传输，因此我们常看到base64编码后的图片；比如：
<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />
这种图片加载方式，就是我们经常看到的经过base64编码后的图片文件；
如何将图片进行base64编码？
现在有很多在线工具，方便前端开发人员将图片转成base64编码的文件；
这里提供一种在线工具：图片转BASE64编码
如何使用base64编码后的图片文件？
Base64格式
data:[][;charset=][;base64],
Base64 在CSS中的使用
.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }
Base64 在HTML中的使用
<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />
特别注意：
在使用的时候，尽量在css文件中使用base64编码的图片，因为css文件可以进行浏览器缓存，而html文件不能被浏览器缓存；有了缓存，就可以减少不必要的http请求；
使用base64编码图片的适用场景 && 优缺点
适用场景：
1.有些作为背景的图片，但又能制作成css sprite
2.转换成base64编码后体积不是太大的时候，适合小型图片，比如logo等
优点：
1.减少http请求
2.放在css中使用的，可以利用缓存，从而减少http请求
缺点：
1.部分浏览器不支持(IE)
2.base64后的图片比较大，会增加插入文件的体积
3.图片完成后还需要base64编码，目前估计手工完成的多，因此，增加了一定的工作量，虽然不多
参考：(优质的文档能够准确，快速地理解掌握知识点；感谢以下文档)