【转】内联图片的优缺点

原文：http://www.cnblogs.com/malvina/p/5815360.html

　　会不会有这样一种感受？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！使用内联图片，不外乎就是优化做业的产物了！

　　至于优势嘛~

　　一、减小http请求次数

　　二、作为背景平铺类的图片使用内联图片的话，减小http请求次数，而且不会影响加载速度

　　使用内联图片的缺点

　　一、浏览器不会缓存内联图片资源

　　二、兼容性较差，只支持ie8以上浏览器

　　三、超过1000kb的图片，base64编码会使图片大小增大，致使网页总体下载速度减慢