移动端图片优化

Question

有数量相当的小size图片（数字节～20KB），两种优化方案请帮我分析下优缺点，从服务器压力，客户端响应速度等方面，谢谢
方案1：使用CSS Sprites合并为一张大图
方案2：使用base64直接把图片编码成字符串写入CSS文件

Answer 1

这两种情况针对的都是图片很少或不会更新使用的，所以在某种程度上，相似度很高（比如都可以减少http请求数、都比直接使用原图片麻烦一点（一个需要拼图，一个需要转码）），这两个方案的区别在于：

1. base64 编码方案不会缓存图片，每次加载都要传输较大的 html/css；
2. css sprites 方案多一个 http 连接；

综上，权衡这两点，选择你需要的。

---

update:
我个人看法，建议使用 css sprites，虽然多一个 http 连接，但根据你表述的 有数量相当的小size图片（数字节～20KB），如果采用 base64 编码方案，目测流量要大大增加。多一个连接数对整体影响不大，更何况还有 Browser 的缓存（这个是重点）。

---

bug fix:
刚忽略了 CSS 也能缓存，经题主提醒，如果将 base64 编码写入 css 文件，而非 html 内部，相比于 css sprites 可以减少一个 http 请求。另外 @p酱 也说了多处重用时无需重复图形内容。

Answer 2

比较两方案相互间的优势。

前者的优势在于

1. 兼容性好。
2. 图片较复杂时构造体积较小。
3. 多处重用时无需重复图形内容。
4. 没有base64编码成本，降低图片更新的维护难度。（但注意Sprites同时修改css和图片某些时候可能造成负担，感谢 @noah 提醒）

后者的优势在于

1. 无额外请求。
2. 对于极小或极简单图片来说数据很少。
3. 可以被gzip。（通过gzip对base64数据的压缩能力通常和图片文件差不多或更强）
4. 降低css维护难度。
5. 可像单独图片一样使用，比如背景重复等。
6. 没有跨域问题，无需考虑缓存、文件头或者cookies问题。

---

我也来update：

总体建议：两者各有优势。如果是大量简单小图片、长时间不需要修改的、需要重复平铺的，可以考虑用base64。如果是经常需要修改的、图片复杂或比较大的、没有重复平铺需要的，以CSS Sprites为优。

如果访问量巨大到一定程度，CSS Sprites多出的一个请求对服务器来说有可能会成为一个大的消耗，如果服务器资源紧缺的话可以考虑全部base64。

就客户端而言，对base64解码和对图片解码，性能负担差距不大，一般可以不用太多考虑。

Answer 3

用PNG Sprite， 否则CPU需要额外开销，我们不能假设用户的CPU都是双核的。