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

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

注意：这五个按钮分辨使用了五张图片

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

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

CSS Sprites的长处：通过只应用一个图片减少了HTTP恳求，并且比“图片舆图”更机动。

效果如下：

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

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

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

代码如下：

      3、内联图片的缺点：

代码如下：

下面列出了三种解决方案：

方案二：CSS Sprites：使用这种方法也能够将五张图片合并为一张图片，并且更为灵巧。

当一个页面的图片在不使用任何计划的情形下，五个图片超链接就只能使用五个图标按钮。
代码如下：

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

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

效果如下：

留神：这五个按钮实在是在一张图片中

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

那么，五张图片就象征着你的该页面又多了五个HTTP要求，它将大大下降页面的浮现效力。增加的HTTP请求是导致页面机能降落的最大刽子手，所以咱们应当尽量减少HTTP请求，而图片是增长HTTP请求的最大可能者，搞定它，事不宜迟！呵呵^_^

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

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

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

自己推举：依据详细情况，使用方案一：图片地图（图像热点）或方案二：CSS Sprites。

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

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

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

附加常识：URL中的相干协定：http:、data:、file:、ftp:、mailto:、smtp:、pop:、dns:、whois:、finger:、daytime:、news:、urn: 等。这其中有一些是官方注册的，还有一些是因为普遍使用而被接收。

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

方案一：图片地图（图像热门）：它将用户的点击映射到一个操作，而无需向后端Web服务器发送任何请求。

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

后果如下：

• 我的行业网站为什么没能盈利_做网站
• 搭建一个强壮网站内部结构设计_
• 网站评论体系设计的不足之处探讨_成都做网站公司
• 网络编辑如何才能写好采访稿_
• 站长们的弹窗还能做多久？_网站开发公司
• 网站、数据库的衍变之路(二)_
• 分析百度收录减少的几个原因_成都网站开发
• 如何分析竞争对手的网站_
• 浅谈用户体验对网站影响的四个方面_网页设计
• 站长们的福音度娘发力图片识别不再是个传说_