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

网页读取优化：考虑到网页页面优化的处理，这个算是让设计师们选择使用 CSS Sprite 的最大诱因了。对于网页设计师来说，越多图档就表示每次浏览器都得向服务器逐一要求各个图档，与其让每个用户的浏览器频繁不断的跟服务器要求档案，不如将这些档案合并在一起，如此一来仅需处理一次要求即可，大幅减少了服务器的负担！

CSS Sprite 并不是一个新的概念，早在红白机年代（或更早）的传统的 2D 游戏设计中，游戏制作者就想到这种将角色图片并排在一起以达到角色动画效果的作法，不但可以降低游戏体积，还可以提高机器运行效率（在那个硬件不发达的年代更为重要）：

同样的技巧也可以应用在网页上，以往在网页中想要出现动画的图像，几乎都只有从 Gif Animation 图档格式或是 Flash SWF 两者中选择一个使用，前者支持广泛，规格却不是很够用，像是仅支持 256 色等；而 Flash 功能强大、目前却面临着支持度的挑战。这个问题似乎一直很难找到一个满意的解决方式。

而CSS Sprite 的出现为这个情形提供了一个新的解决方式，像是Dumb Ways To Die 的官方网页，即使了此方法重现了许多该影片中的动画片段。

如果去检查网页中使用的图档，就可以找到如以下的动画截图：