浅析 base64 处理图片

　　Base64是一种用64个字符来表示任意二进制数据的方法；

　　在网络中，base64编码后的文件可以通过http协议传输，因此我们常看到base64编码后的图片；比如：

<img src="https://img-blog.csdnimg.cn/2022010704111397712.gif" />

　　这种图片加载方式，就是我们经常看到的经过base64编码后的图片文件；

 

如何将图片进行base64编码？

　　现在有很多在线工具，方便前端开发人员将图片转成base64编码的文件；

　　这里提供一种在线工具：图片转BASE64编码

 

如何使用base64编码后的图片文件？

　　Base64格式

data:[][;charset=][;base64],

 

　　Base64 在CSS中的使用

.demoImg{ background-image: url("https://img-blog.csdnimg.cn/2022010704111498745.jpg"); }

 

　　Base64 在HTML中的使用

<img width="40" height="30" src="https://img-blog.csdnimg.cn/2022010704111498745.jpg" />

　　特别注意：

　　　　在使用的时候，尽量在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页面性能优化

转载于:https://www.cnblogs.com/RocketV2/p/6626153.html