base64编码的图片有什么用

1. 什么是图片的base64编码

网页上展示的时候是这样的&＃xff08;后面的…非常长&＃xff09;

我们所看到的网页上的每一个图片&＃xff0c;都是需要消耗一个 http 请求下载而来的&＃xff0c;一个http请求就是一个网络开销。

图片的下载始终都要向服务器发出请求&＃xff0c;要是图片的下载不用向服务器发出请求&＃xff0c;而可以随着 css 的下载同时下载到本地&＃xff0c;那不是非常节省网络开销&＃xff08;一次就够&＃xff09;&＃xff1f;base64 正好能解决这个问题。

2. 什么时候用呢&＃xff1f;优点呢&＃xff1f;

如果图片足够小且因为用处的特殊性无法被制作成雪碧图&＃xff08;CssSprites&＃xff09;&＃xff0c;在整个网站的复用性很高且基本不会被更新&＃xff0c;这时那么我们就可以将这个图片转为 base64编码

1. 减少http请求次数&＃xff08;最关键的&＃xff09;
2. 采用base64的图片随着页面一起下载&＃xff0c;因此不会存在跨域请求的问题
3. 没有图片更新要上传图片&＃xff0c;因此不会造成清理图片缓存的问题

3. 缺点

1. 增加css文件的大小。
2. 浏览器兼容性,支持ie10及以上
3. 解析css的时间增长

4. 合理使用

base64虽有优点&＃xff0c;但是其缺点也很明显

虽然减少了http请求&＃xff0c;但是增加了css文件的体积&＃xff0c;导致渲染时间过长&＃xff0c;空白屏幕时间增长所以和CssSprites之间根据场景择优使用