CSS Sprites的概念、原理、适用范围和优缺点

• CSS Sprites概念

  CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

  加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

   

  CSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的 详细阐述 。原先只在CSS玩家之间作为一种网页制作方法流传，后来出来个 14 Rules for Faster-Loading Web Sites , 技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于http://www.google.co.kr/ 下方的那几个动画。最新发布的YUI中，也是使用到CSS Sprites，几乎都有的CSS装饰图都被一个 40×2000的图 包办。社交大站Facebook最近也使用了一个 22×1150的图片 承担了所有icon.一时间，CSS Sprites无处不在。

   

• 原理

  我们知道，自CSS革命以降，HTML倾向于语义化，在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的，少不了各种漂亮的图来装点。新时代的生产方式是，在HTML布满各种各样的钩子（hook），然后交由CSS来处理。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现（题外话：为何我提现阶段，因为未来浏览器若支持content则又新增另外的实现方法）。我们的主角是，你一定猜到了，就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

• css sprites 适用范围：

  1，需要通过降低http请求数完成网页加速。

  2，网页中含有大量小图标。或者，某些图标通用性很强。

  3，网页中有需要预载的图片。主要是a与a:hover背景图这种关系的。如果a与a:hover的背景图分别加载，那么，就会出现用户鼠标移到某个按钮上，按钮的背景突然消失再出来，产生“闪烁”，如果按钮文字色与大背景相同或相近，就更囧了，有可能让人产生按钮“消失”了的错觉。

   

• 需要满足的条件

  在网页设计中，通过这项技术拼合在一起的图片最好有一项规律。定宽或者定高。最好是宽高都能定下来。需要平铺的图片，显然不适合sprite。

  如上图的buttons，就属于定宽定高的情况。

  定宽情况下，则可平行排列若干小图片。定高，则纵向排列小图片。

  若背景既不定宽，也不定高情况下强行使用css sprites技术，则容易产生“不应该出现的图片出现在页面上”的状态。若是“强行定高”，也将非常不利于日后的维护。

• 优点

  我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

• 缺点

  至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。

  由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

  前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。