现在的位置: 首页 > 综合 > 正文

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

2016年10月30日 ⁄ 综合 ⁄ 共 1166字 ⁄ 字号 评论关闭

通过各种减少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")}

抱歉!评论已关闭.