1. 什么是图片的base64编码
图片的base64编码就是可以将一张图片数据编码成一串字符串,使用该字符串代替图像地址url。
网页上展示的时候是这样的(后面的…非常长)
我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的,一个http请求就是一个网络开销。
图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 css 的下载同时下载到本地,那不是非常节省网络开销(一次就够)?base64 正好能解决这个问题。
2. 什么时候用呢?优点呢?
如果图片足够小且因为用处的特殊性无法被制作成雪碧图(CssSprites),在整个网站的复用性很高且基本不会被更新,这时那么我们就可以将这个图片转为 base64编码
- 减少http请求次数(最关键的)
- 采用base64的图片随着页面一起下载,因此不会存在跨域请求的问题
- 没有图片更新要上传图片,因此不会造成清理图片缓存的问题
3. 缺点
- 增加css文件的大小。
- 浏览器兼容性,支持ie10及以上
- 解析css的时间增长
4. 合理使用
base64虽有优点,但是其缺点也很明显
虽然减少了http请求,但是增加了css文件的体积,导致渲染时间过长,空白屏幕时间增长所以和CssSprites之间根据场景择优使用