CSS Sprites

最近发现一些同学又开始讨论 CSS Sprites 这个争议颇多的技巧，我觉得所有的计算机语言技术都没有严格的对错，是非之分，只是要注意尺度问题，实际上世界万物都是要控制度的。

Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到：

CSS sprites 的最大问题是内存占用。非精确构造的 sprite 图片会占用意想不到的内存空间。以 WHIT TV 网站为例，这里是 一张 sprite 图片，1299×15,000 的png，已经经过很好的压缩，实际下载大小只有26K左右，但是浏览器不会转换压缩的图像数据。当图片下载并解压，将耗费75MB内 存(1299 * 15000 * 4)。如果图片没有阿尔法透明，可能会减小到1299 * 15000 * 3，可往往还是牺牲了渲染速度。即便如此，我们占用了55MB内存。这张图片绝大部分是空白的，什么都没有，没有什么有用的内容。仅仅因为这张图片，当浏 览器只加载WHIT 主页时会增加75+MB内存。

Mozilla Web Development Blog 在《 Use Sprites Wisely》中总结道：

简而言之，即使是很小的 sprite 图片也有可能吃掉大量的系统内存 — 每个页面50M甚至100M或者更多。速度虽然至关重要，但要意识到 sprite 及其他 hacks 同样会影响用户体验。

现在再回过头看之前的《Yahoo与 Gmail的CSS Sprites对比》，综合性能方面 Gmail 无疑占了上风。当然，这些只是前端层面的优化，从根源上来看，设计师用最少的图片来实现最优的效果才是王道。