分享优化网站性能经验之减少图片HTTP请求流量方案(2)

注意：在这个“CSS Sprites”中用到的图片就是“图片地图”中的同一张图片。（并特地只显示其中的三个图标）

CSS Sprites的原理：只是定位到图片其中的一块区域，并显示在某个位置而已。

CSS Sprites的优点：通过只使用一个图片减少了HTTP请求，并且比“图片地图”更灵活。

很多人会误认为：合并的图片要比分离的图片的总和要大，因为合并的图片中包含有附加的空白区域。
实际上，合并的图片要比分离的图片的总和要小，这是因为它降低了图片自身的开销（颜色表、格式信息，等等）。

方案三：内联图片：通过使用data: URL模式在Web页面中包含图片，且无需任何额外的HTTP请求。（IE目前不支持）

      1、内联图片的原理：允许将小块数据内联为‘立即数(immediate data)’，数据就包含在其URL自身之中。

      2、内联图片的格式：data:[<mediatype>][;base64]，<data>

举例：一个内联图片可以定义为
<img src="data:image/gif;base64，asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33" >

其中“asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33”就是该图片的数据。

data: URL模式-> 基本用于内联图片，可以用在任何需要指定URL的地方，如：script和a标签中。

      3、内联图片的缺陷：

            a> 不受IE的支持（IE7也如此）；

            b> 保存数据的大小上受限制（Firefox 1.5支持高达100KB的数据）；

            c> Base64编码会增加其图片的大小；

            d> 在跨越不同页面时不会被缓存

              （可以将内联图片作为背景图片保存在外部CSS样式表中来解决此问题，但会增加一个HTTP请求以换得数据被缓存的结果。）；

在PHP技术中，使用函数file_get_contents从磁盘读取图片并插入到页面中来创建内联图片：

在其HTML中，使用style标签的href属性指定外部样式表文件时，直接指定到了一个PHP模版的.php文件（注意:不是.css文件），该PHP模版使用file_get_contents函数生成其样式表：

.home{ background-image:url(data:image/gif;base64,<?php echo base64_encode(file_get_contents("../img/home.gif")) ?>);}

其最终数据将是base64编码格式的图片data数据。

当然，使用ASP.NET技术生成其base64编码格式的图片data数据也不会很难。大家可以自行实验。

本人推荐：根据具体情况，使用方案一：图片地图（图像热点）或方案二：CSS Sprites。

附加知识：URL中的相关协议：http:、data:、file:、ftp:、mailto:、smtp:、pop:、dns:、whois:、finger:、daytime:、news:、urn: 等。这其中有一些是官方注册的，还有一些是由于广泛使用而被接受。