会不会有这样一种感觉？IT技术开发知识面很广也很深，总会有你不懂得问题出现。一个接着一个新的问题，一个接着一个新的挑战。
今天，解读【内联图片】，什么是内联图片，使用内联图片的优缺点是什么？这个问题是我面试一家新创业的公司所提问的，而且他说这个问题所包含很多工程师基础知识考察问题，解读完，就是你基础弱爆了。。。不断地面试，不断地重新审视自己，不断地跌倒爬起。我想这才是成长的意义。
内联图片是什么？
以往我们加载图片，会这么写：<img src="../a.jpg"> 或者 以css中的background-img：url("../a.png")，
那么内联图片则是这么写的<imgsrc="data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA" />
<img src="data:image/png;base64,iVBOR....>data - 取得数据的协定名称
image/png - 数据类型名称
base64 - 数据的编码方法
iUANR.... - 编码后的数据
: , ; - data URI scheme 指定的分隔符号
为什么要使用内联图片？使用内联图片的优点。
减少http请求，已达到优化客户端加载速度，这个是我们至今不断在做的事情。bingo！使用内联图片，不外乎就是优化作业的产物了！
至于优点嘛~
1、减少http请求次数
2、做为背景平铺类的图片使用内联图片的话，减少http请求次数，并且不会影响加载速度
使用内联图片的缺点
1、浏览器不会缓存内联图片资源
2、兼容性较差，只支持ie8以上浏览器
3、超过1000kb的图片，base64编码会使图片大小增大，导致网页整体下载速度减慢