浅析 base64 处理图片

　　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编码，目前估计手工完成的多，所以，增长了必定的工做量，虽然很少

 

参考：(优质的文档可以准确，快速地理解掌握知识点；感谢如下文档)

[1] 小tip:base64:URL背景图片与web页面性能优化