base64编码的图片有什么用

1. 什么是图片的base64编码

图片的base64编码就是可以将一张图片数据编码成一串字符串,使用该字符串代替图像地址url

网页上展示的时候是这样的(后面的…非常长)
在这里插入图片描述

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

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

2. 什么时候用呢?优点呢?

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

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

3. 缺点

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

4. 合理使用

base64虽有优点,但是其缺点也很明显

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页