减少HTTP请求密技-内联图片的秘密

时间：2024-10-21 10:04:32

通过各种减少HTTP请求的来提高网站速度和优化网站已经不是秘密。其中图片合并减少HTTP请求由为被大家所看重，通过合并多个JS文件合并CSS样式文件外还有个减少HTTP请求的密技就是内联图片的使用。

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

内联图片语法。<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请求加快了网站速度。那么你可能会问到如何获取图片的base64编码呢。网络上有很多免费的base编码和解码工具，但是有个最简单方法就是我们写一个PHP文件。使用base64_encode()进行编码：比如：

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

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

如果你想了解更多的网站加速技术和 UED用户体验求继续关注熊猫SEO

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

熊猫SEO为了用户体验,为了网站加速而不断努力

熊猫SEO 2013.7.18