写在前面
项目中,首页的背景图(600KB), 半天请求不到数据。
get不到
无奈之下,开始压缩图片。
嗯...压缩完成后,200KB左右,找到运维更新了代码,翘首以待。竟然还请求不到背景图!
错误界面
好的呢,还有办法,不去请求资源,咱使用base64。
base64图片的获取
有很多在线转换工具,google一下会有很多。
base64的使用方法
<!-- 在css代码中背景图片的写法。-->
.header {
background-image: url(data:image/png;base64,iVBORw0...);
}
css中的base64写法
<!-- 在html代码img标签中base64的写法。-->
<img src="data:image/gif;base64,base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQE.....>
base64图片的优缺点
优点
- 无额外请求
- 可像单独图片一样使用,比如背景图片重复使用等
- 没有跨域问题,无需考虑缓存、文件头或者cookies问题
缺陷
-
css体积会极具变大,页面解析 CSS 生成的 CSSOM 时间增加
本来不到40KB的css文件,变成了200KB,请求时间页变长了。
后来的css
网友评论