总结css之内联图片的优缺点

　　会不会有这样一种感觉？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编码会使图片大小增大，导致网页整体下载速度减慢