减少图片HTTP请求的方案提高网站性能

　　注意：这五个按钮其实是在一张图片中

　　方案二：CSS Sprites：使用这种方式也可以将五张图片合并为一张图片，并且更为灵活。

　　代码如下：

<style>
/*　对div中所有span的样式设置　*/
#navbar　span　{
　　/*　定义<span>标签将截取的图片宽度和高度　*/
　　width:30px;　height:31px;
　　/*　添加包含了所有图标的图片　*/
　　background-image:url(http_request_img/imagemap.gif);
　　display:inline;　float:left;
}
　/*　background-position：指定图标在CSS　Sprites图片的偏移量
　　　　margin-left　和　margin-right　则用来定位图标位置
　*/
.home　　　　　{　background-position:0　0;　margin-left:2px;}
.gifts　　　　{　background-position:-35px　0;　margin-left:50px;}
.cart　　　　　{　background-position:-70px　0;　margin-left:120px;}
</style>
<div　id="navbar"　style="border:　2px　ridge　rgb(51,　51,　51);　padding:　4px　0pt;　background-color:#ff0;　width:　300px;　height:　32px;">
　　<a　href="javascript:alert('Home')"　title="Home">
　　　　　<span　class="home"></span></a>　<!--　注意：该span标签用来加载图片　-->
　　<a　href="javascript:alert('Gifts')"　title="Gifts">
　　　　<span　class="gifts"></span></a>　<!--　注意：该span标签用来加载图片　-->
　　<a　href="javascript:alert('Cart')"　title="Cart">
　　　　<span　class="cart"></span></a>　　<!--　注意：该span标签用来加载图片　-->
</div>

效果如下：

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

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

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

　　很多人会误认为：合并的图片要比分离的图片的总和要大，因为合并的图片中包含有附加的空白区域。

　　实际上，合并的图片要比分离的图片的总和要小，这是因为它降低了图片自身的开销（颜色表、格式信息，等等）。

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

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

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

　　举例：一个内联图片可以定义为

　　<img　src="data:image/gif;base64，asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33"　>　

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

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

　　三、内联图片的缺陷：a> 不受IE的支持（IE7也如此）； b> 保存数据的大小上受限制（Firefox 1.5支持高达100KB的数据）；c> Base64编码会增加其图片的大小；d> 在跨越不同页面时不会被缓存（可是将内联图片作为背景图片保存在外部CSS样式表中来解决此问题，但会增加一个HTTP请求以换得数据被缓存的结果。）；