如何使用图片精灵优化你的网站

在我之前写的几篇网站优化的文章中，着墨最多的是减少HTTP请求。通过减少请求数目，你的浏览器必须能对你的网站所有内容成功检索，总的HTTP请求延迟减少，从而加速了网站的加载时间。如果你要对这种优化方法做个类比，那莫过于硬盘文件传送。复制1000份kB级的文件比复制单个G级文件用时更少。这是由于启动和暂停1000次小的传送工作量比只对一些大文件来得多。

使用图片精灵是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中，即你的一张图片精灵由10张图片组成，那将避免9次HTTP请求，这减少的9次请求时延，正是加速的加载时间。这也有问题，跟每个HTTP请求的服务器开销一样，需由Apache的子进程管理，占用20MB的内存。你最好帮你的服务器进程减少HTTP请求：卸载媒体到Web前端Amazon S3，诸如此类。

图片精灵和CSS联袂才能让你的图片精灵得以显示。下面是两个图片精灵，一个是Google的，一个是我的。

创建图片精灵

照猫画虎，把你网站上经常使用的web图片元素打包——比如你的logo，RSS图标，还有其他不会经常变更的东西。用Photoshop或者你的图片编辑工具，把它们放在单个的图片里。你可以尽贴着放置图片，但要是你稍微留点白再下一步选中会更简单些，然后保存图片。

编写CSS代码

有了图片精灵，你将要用CSS选择器对每个只显示精灵中部分图片的链接进行处理：只要你需要的那部分。你需要知道待显示图片的精确大小以及位置。这步用到Photoshop中的切片工具并选出你要用的那部分的图。对新切片右键单击，选择编辑切片。在弹出的窗口会有图片的分辨率和位置。

在这个示例中，我选用精灵中大小为42×42px的图，它有336px的偏移（译注：是指左偏移）并紧贴着顶部。这样便形成了相应的CSS：

a.stammy, a.stammy:hover{
     background:#fff url(path/to/sprites.png) -336px 0 no-repeat;
     display:block;
     height:42px;
     width:42px;
     text-indent:-9999px;
     overflow:hidden;
}

CSS选择器对所有含 class="stammy" 属性的链接都有效。背景属性载入精灵图片，然后设置背景图位置为负值（其必为负）。如果图片离顶部有10个像素，那背景位置应该是“-336px -10px”。之后在CSS中设置了宽和高。我对悬停伪类（hover pseudoclass）也进行了设置，因为有一次当我悬停在该类的链接上时，会改变链接的悬停状态的颜色，从而背景图会消失。

设置溢出隐藏“解决当你选择要替换的文本的时候，那高亮部分会一直延伸到屏幕左侧的烦人问题”，正如Rob所说。

对其他所有精灵中的图片如法炮制，并对每个选择器命名。

编写XHTML代码

目今你已经对每个精灵中的图片有一些CSS选择器。至此你已经搞定了大问题，还差最后一步（译注：原文是“home stretch”）。现在只需对每个选择器创建链接。下面是“stammy”选择器（图是我的证件照）的链接的样子：

<a class="stammy" href="http://link/to/whatever.com" title="Paul Stamatiou">Paul Stamatiou</a>

相当简单吧？用CSS和链接设置类，将精灵的信息组合起来，只显示精灵的一部分。虽此，因为我们甚至没使用一个img标签，我们不能设置alt属性，而这对移动用户、搜索引擎、屏幕阅读器之类的来说至关重要。将文字写在链接中，再用CSS文本缩进将其移出屏幕范围，这样你就无需吧文字叠在图片上而同样具有可用性。

简言之

• 过多HTTP请求不好。

• 使用多张图片造成上述问题。

• 精灵管用。

• 精灵很易实现，像Google一样的大块头多年来都用它节省带宽。