CSS雪碧已经出现一段时间了，并上升为一种可以让你的网站速度变快的方式。Steve Souders刚刚在Velocity ’09上展示了SpriteMe! (讨论——为什么在你可以使用canvase和toDataURL和及时生成雪碧的时候还要使用CSS雪碧生成器或其它基于服务器的工具？）。然而，关于CSS雪碧有一些误解，最主要的一个就是它们没有缺点。

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染(值得一提的是，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签)。

CSS雪碧的最大问题是内存使用。除非这个雪碧图片是被非常小心的组织，你就会最终使用大量的无用的空白。我最喜欢的例子是来自于WHIT TV的网站，那里的这张图片用作精灵。注意这是一个1299×15,000像素的PNG图片。它也被压缩的很好——实际下载大小只有大概26K — 但是浏览器并不会渲染压缩后的图片数据。当这个图片被下载并被解压缩之后，它将占用差不多75MB的内存 (1299 * 15000 * 4)。如果这个图片并没有使用alpha透明，它将会被优化至1299 * 15000 * 3，但是要在损失渲染速度的情况下。即使那样，我们也会讨论55MB。这张图片的大部分其实就是空白，那里什么都没有，没没有任何有用的内容。只是加载WHIT主页就会导致你的浏览器的内存占用上升到至少75+MB，仅仅是因为那一张图片。（PS:遗憾的是，该网站最近已经改版，文中提到的图片已经不存在了）

有利于网站的正确的取舍并不存在。

另外一个(虽然并没有那么重要)不足就是如果一个使用CSS雪碧的页面使用一些浏览器提供的整页缩放功能缩放了，浏览器就需要做一些额外的工作来纠正这些图片边缘的行为——基本上来说，是为了避免雪碧中相邻的图片被“露进来”。这对于小图片没有什么问题，但是对于大图片会是一个性能下降。

当然有一些显示CSS 雪碧的明显的好处的例子，主要的例子就是合并一批相同大小的图片到一个文件中。例如，一系列用作标识你的网站中的很多东西的16×16图标，或者是一些用作分类的头之类的32×32 的图标。但是整合严重不同尺寸的图片，特别是将又瘦又高的图片和又宽又矮的图片放到一起从来不是什么好主意。

然而，CSS雪碧确实提高页面加载时间(至少在初始的页面加载中——在后续的页面加载中，浏览器就将图片缓存了)。有没有什么可以替代的？不幸的是，还没有一个可以替代的方案。很多浏览器开始支持离线清单了，将其扩展到允许下载一个包含一系列资源和对应的URL的清单的文件(比如一个jar/zip文件)或许是有可能的。但是任何此类做法在一段时间内还不会见到……

所以，在决定是否要使用CSS雪碧的时候，要注意在最初页面加载性能之外还有很多的因素。作为一个普通的经验法则，如果你的CSS 雪碧的大部分地方不包含真正的图片内容，你应该相应的避免使用它。同样，关注将来可能出现的既保持页面加载速度，同时注意避免内存的缺陷和雪碧的性能影响。

其它的CSS雪碧的不足

下面是一些网友在该文评论中提到的CSS雪碧的某些不足：

• CSS 雪碧调用的图片不能被打印，除非在@media中特别添加 print声明——by RichB
• 如果要修改雪碧中的一个图片，你就要修改整张图片，这无疑会增大工作量——by Tom B

如果你在使用的过程中，有发现其它的CSS雪碧的不足，欢迎提出来。

CSS Tricks 前段时间搞了一个名为炫耀一下你的精灵吧!的比赛，很多网友贴出了很多很棒的CSS精灵图片。这里是CSS Tricks精选出来的一些精灵图片。从中我们可以膜拜一下这些牛站们对CSS中用到的图片的处理方法。

这些图片中的一些根据我们网站的需要可能有些压缩。但是本文的意思并不是让大家模仿他们，只是希望它们能给你一些灵感的火花！

PS:现在很多人开始称呼CSS sprite为CSS雪碧，我认为这是个很好的叫法，大家认为呢？——神飞

众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。

下面是一张样图：

本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。

不要等到你完成切片之后才开始sprite.

如果你边切图边写CSS，然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中，你就不得不完全重写你的CSS，你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合，就会比较容易些。

把图片放到它要显示的地方的相对的地方

这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如，如果我们希望一个图片出现在一个元素的左侧：

将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS移动背景图片的位置的时候，基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。

定位时避免使用bottom或right等

当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。

给每个图片足够的空间

就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。

例子：

例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片，你可以看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会意外出现。

不用担心Sprite图片的像素大小

如果你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。addons.mozilla.org上使用的Sprite图片有1,000px×2,000 px那么大，但是图片的大小仅仅16.7kb!

CSS sprites (CSS精灵，也有人翻译成CSS妖精) 是一种通过整合图片来改善我们的页面的加载时间，减少服务器请求数的方法。在这篇文章里，我将教你如何来实现它们。

看一下演示 | 下载

为了搞清楚什么是CSS sprite ,这里是一张 Google制作的CSS 精灵图片：

当你用谷歌搜索的时候，你会发现页面底部的分页，你会看到就像这样的东西： Gooooooooooooooogle. 字母 ‘o’ 是用CSS sprite平铺的，这样就替代了重复加载15次字母，它只是加载了包含所有字母的精灵，一次完成。

创建我们的CSS sprite – 步骤一: 制作图片

Ok, 首先，我们必须制作我们的精灵图片。你可以使用Fireworks，Photoshop或任何你能使用的软件。这里是我做的：

正如你看到的，精灵是由一些中间被1像素款的线划分开来的图像组成的。这种区分不是真的必须的，就像你所看到的谷歌的精灵，但当我们写CSS的时候它使我们的工作更加方便，请相信我。

步骤二: 创建我们的精灵图片显示者(显示层)

一旦我们制作了我们的精灵图片，我们必须制作一个透明的1px x 1px gif图片。这个图片稍后会是在我们的精灵里用来显示不同的图片的东西。

步骤三：编写CSS代码

首秀安，我们先创建一个类’sprite’，它将加载我们的Sprite图片。

.sprite {background:url(../images/mySprite.png);}

在加载我们的精灵之后，我们必须精确定义里面的图片的高度和宽度。

左右的图片有同样的高度，所有的应用也是，我可以给他们一个class来共用他们的高度。我将使用这两个class：’monster’ 和 ‘application’。

.sprite {background:url(../images/mySprite.png);}
 
.monster {height:128px;}
.application {height:61px;}

现在，我们必须定义每一个图片的宽度，因为他们是不同的。我们将为他们中的每一个定义一个class。

.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;}
.application {height:61px;}
 
/* Monsters */
.doctor {width:103px;}
.octopus {width:89px;}
.wolf {width:115px;}
.star {width:126px;}
.dog {width:128px;}
 
/* Applications -*/
.css {width:61px;}
.activityMonitor {width:58px;}
.dashboard {width:51px;}
.quicktime {width:53px;}
.scanner {width:74px;}

做完了？ Ok, 现在到最精彩的部分了。为了恰当的显示，我们必须对每一个图片定义个 background-position。 这个background-position 必须一直有负值，因为我们的背景图片必须向左移动，来显示不同的图片。

我们必须让精灵里面的图片想左上角移动，因为那里是我们开始看图片的起点。那个角相当于 X轴的0px, Y轴的0px。

然而，我的精灵在左边和上边两个像素的空白，所以当我们定义元素的background-position时我们必须重视它们。

记住background-position的第一个值, 是水平方向(x-轴) ，第二个是垂直方向(y-轴). 让我们完成我们的这头狼。我们的狼需要想左移动196px并向上移动 2px 。

.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;}
.application {height:61px;}
 
/* Monsters */
.doctor {width:103px;}
.octopus {width:89px;}
.wolf {width:115px; background-position:-196px -2px;}
.star {width:126px;}
.dog {width:128px;}
 
/* Applications -*/
.css {width:61px;}
.activityMonitor {width:58px;}
.dashboard {width:51px;}
.quicktime {width:53px;}
.scanner {width:74px;}

现在让我们用同样的方法来完成所有的图片：

.sprite {background:url(../images/mySprite.png);}
 
.monster {height:128px;}
.application {height:61px;}
 
/* Monsters */
.doctor {width:103px; background-position:-2px -2px;}
.octopus {width:89px; background-position:-106px -2px;}
.wolf {width:115px; background-position:-196px -2px;}
.star {width:126px; background-position:-312px -2px;}
.dog {width:128px; background-position:-439px -2px;}
 
/* Applications -*/
.css {width:61px; background-position:-2px -133px;}
.activityMonitor {width:58px; background-position:-64px -133px;}
.dashboard {width:51px; background-position:-123px -133px;}
.quicktime {width:53px; background-position:-175px -133px;}
.scanner {width:74px; background-position:-229px -133px;}

看一下这个元素的Y轴，所有的怪兽，和所有的应用(的Y轴)是一样的。这是因为他们在同样的垂直位置排在一行。因此，他们全部分享到顶部变现同样的距离。

步骤四： 编写HTML 代码(小意思)

<img src="images/transparent.gif" class="sprite monster doctor" alt="Doctor Image" />
<img src="images/transparent.gif" class="sprite monster octopus" alt="Octopus Image" />
 
<img src="images/transparent.gif" class="sprite monster wolf" alt="Wolf Image" />
<img src="images/transparent.gif" class="sprite monster star" alt="Star Image" />
 
<img src="images/transparent.gif" class="sprite monster dog" alt="Dog Image" />
<img src="images/transparent.gif" class="sprite application css" alt="Css Image" />
 
<img src="images/transparent.gif" class="sprite application activityMonitor" alt="ActivityMonitor Image" />
<img src="images/transparent.gif" class="sprite application dashboard" alt="Dashboard Image" />
 
<img src="images/transparent.gif" class="sprite application quicktime" alt="Quicktime Image" />
<img src="images/transparent.gif" class="sprite application scanner" alt="Scanner Image" />

定义这些代码用我们之前做的透明的1PX x 1PX gif图片，添加样式，然后就是精灵的时间了！

这个方法的现在

要使CSS精灵工作的话，必须始终有一个宽度、高度和背景位置。如果你没有定义元素的高度或宽度，你将在那个图片上看到整个精灵图片。相当纠结但是还比较好接受。

教程中用到的图标

这个教程中用到的图标是David Lanham制作的Somatic Xtras 2 Icons 。