为了节省几 k 的流量和几个服务器请求(还只发生在第一次加载页面时),sprite 技术是否真的值得?
编码和维护的时间成本会增加
图片切片输出之后,麻烦依然存在。虽然习惯这个过程之后,按钮 sprite 可以很简单地编码到 CSS 中,但是其他的 sprites 就不这么简单了。
单一的一个按钮一般会是个有定宽的 <ul> 元素。假如按钮的 sprite 是彼此独立的,就比较简单:<ul> 的宽高会和列表项和锚点的宽高一致,每个状态的 sprite 对齐摆放。sprite 的位置也可以很容易地根据每个按钮的宽高计算出来。
但是遇到之前提到的,像 Amazon 或者 Google 用到的大型 sprite 的情况时,会怎么样呢?你能想象到到维护这么一个文件,并且在 CSS 中改变 sprite 项的位置会是什么样吗?还有第一次创建 CSS 代码的情况?相对于一个可以轻松计算出来状态位置的简单按钮来说,大型的 sprite 会导致无尽地测试和图片状态的重新摆放。

一些用于定位 Google 的 sprite 图片的样式
Amazon 的 sprites 确实节省了至少 30 个 HTTP 连接,性能方面也确实有了很大的提高。但是把这些好处拿来和开发以及维护成本做个比较,再把缓存和网速等因素考虑进来,决定使用如此大型的 sprites 也许就不那么令人信服了。
Sprites 是否真的需要“维护”?
当然了,有些人不觉得 sprite 是首要引起头疼的问题。大部分情况下,一个 sprite 创建并编码完之后,就很少会被改动了,也不会受进行中的网站维护的影响。假如你感觉 sprite 维护不是个问题的话,那么也许使用大型 sprite 是最好的选择。
不是所有图片都是背景
另一个不提倡滥用 CSS sprite 的理由是这会导致开发人员错误地使用背景图片。有经验的开发人员会在项目中考虑可访问性问题,他们明白并不是每个图片都是背景。背景图片应该留给按钮以及用来装饰元素,而用来传达重要信息的图像应该内联在 XHTML 中。

Amazon 正确是使用了内联图像元素和装饰用的背景。
错误得使用 Sprites 影响可访问性
一些刚入门的开发人员会为了节省 HTTP 请求数(这是使用 CSS Sprite 一直强调的好处)而把所有的图片都当背景图片来处理 – 甚至是那些传达重要信息的图片。结果会导致一个缺乏可访问性的网站,也会降低 HTML 中 title 和 alt 的潜在益处。
因此,CSS sprite 本身没错,而且也不会引发可访问性问题(事实上,正确得使用会提高可访问性)。但是不分对错得过度使用 sprite 会阻碍具有可访问性和生产率方面的网页建设进程。










