内联图像简介

1.什么是内联图像？

内联图片是一种新型的图像格式(在我看来是这样不知道理解对否),官方称为：data URI scheme。通常我们存储的图片在网页中需要写：<imgsrc="http://blog.xmaoseo.com/images /xmaoseo.jpg"/>而内联图片写法会是 <imgsrc="data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA" />

2.内联图像语法

<img src="data:image/png;base64,iVBOR....>

data - 取得数据的协定名称

image/png - 数据类型名称

base64 - 数据的编码方法

iUANR.... - 编码后的数据

: , ; - data URI scheme 指定的分隔符号

  

这种图片格式无需额外的HTTP请求，但还有重要的一点，浏览器不会缓存这种图像。DATAURL节省了HTTP请求，但是如果这个图像在网页多个地方显示会加大网页的内容，延长下载时间。还有一点IE8以下都不支持这种图像，所以还是IE6的用户就比较悲催了。并且超过100kb图像使用base64编码也会增大图片大小。导致网页整体下载量增加。 (BASE64编码图片导致网站浏览缓慢崩溃http://blog.xmaoseo.com/125.html)    但是很多聪明人做法是把背景平铺类图片作为内联图片使用，这样效果很不错。也减少了HTTP请求加快了网站速度。

3.那么你可能会问到如何获取图片的base64编码呢？

网络上有很多免费的base编码和解码工具，但是有个最简单方法就是我们写一个PHP文件。使用base64_encode()进行编码，比如：

echo base64_encode(file_get_contents('211-11.JPG'));

4.如何解决网页下载延迟问题？

最简单一个方法就是用写成CSS里的背景去调用CLASS 类名就可以了。比如咱们用上面的例 子：.blogxmao{background:url(data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA")}

参考地址：

http://jingyan.baidu.com/article/8cdccae99bf04a315413cd0c.html?st=&net_type=&bd_page_type=1&os=&rst=