网页图片整理术之CSS Sprite的应用

CSS Sprite 是一种图片的处理方式，它允许网页设计师将很多张图片合并在同一张图档中，然后根据 CSS 档中的文字描述将图档分区块加载，是现在很常见的网页图片处理方式。

例如网页上一个的按钮的三种变化效果的图片，将其顺序摆放在同一个图档中使用：

而这张是 Facebook 页面上所使用的小图标图档，像是大家最常看到的 Like 图标其实也只是从这张图片里面取出一小部分加以显示而已。

诸如以上，几乎现在的网站都会透过使用 CSS Sprite 来将网页作优化，比起传统的切割图片方式，使用 CSS Sprite 有着以下的优点：

方便整理、命名：由于将图片合并了、图档的数量减少了，整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名。

修改以及调整更为快速：由于每个按钮都在同一张图档中，设计师在事后修改细节时就可以在同一个档案中工作，再也不用辛苦的切割图档。

档案体积减小：虽然影响不大，但将图档合并可以有效的减少档案的体积。