写在前面
项目中，首页的背景图（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
