不建议将大图转换
,方便快捷将图片转换成Base64编码,或Base64编码转成图片
// Base64 在CSS中的使用 .box{ background-image: url("data:image/jpg;base64,/9j/4QMZR..."); } // Base64 在HTML中的使用 <img src="data:image/jpg;base64,/9j/4QMZR..." />
图片的base64编码就是可以将一张图片数据编码成一串字符串,使用该字符串代替图像地址url。
1、增加css文件的大小; 2、浏览器兼容性; 3、解析css的时间增长
cssprites技术就是将多个图片合成一个大的图片,将多次图片请求合成一张大图的请求,以此来达到减少http请求的次数
页面具有多种风格,需要换肤功能,可使用CssSprites 图片不随意改动 使用时无需重复图形的内容 没有base64编码成本,降低图片更新的维护难度 不会增加css文件体积
base64虽有优点,但是其缺点也很明显,在使用上存在一些明显的缺陷
使用base64不代表性能优化,使用base64减少了http请求,但是增加了css文件的体积,css文件体积增大意味着CRP的阻塞