移动端图片优化

Question

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

Answer 1

这两种情况针对的都是图片很少或不会更新使用的，所以在某种程度上，相似度很高（比如都可以减少http请求数、都比直接使用原图片麻烦一点（一个需要拼图，一个需要转码）），这两个方案的区别在于：base64编码方案不会缓存图片，每次加载都要传输较大的html/css；csssprites方案多一个http连接；综上，权衡这两点，选择你需要的。update:我个人看法，建议使用csssprites，虽然多一个http连接，但根据你表述的有数量相当的小size图片（数字节～20KB），如果采用base64编码方案，目测流量要大大增加。多一个连接数对整体影响不大，更何况还有Browser的缓存（这个是重点）。bugfix:刚忽略了CSS也能缓存，经题主提醒，如果将base64编码写入css文件，而非html内部，相比于csssprites可以减少一个http请求。另外@p酱也说了多处重用时无需重复图形内容。

Answer 2

比较两方案相互间的优势。前者的优势在于兼容性好。图片较复杂时构造体积较小。多处重用时无需重复图形内容。没有base64编码成本，降低图片更新的维护难度。（但注意Sprites同时修改css和图片某些时候可能造成负担，感谢@noah提醒）后者的优势在于无额外请求。对于极小或极简单图片来说数据很少。可以被gzip。（通过gzip对base64数据的压缩能力通常和图片文件差不多或更强）降低css维护难度。可像单独图片一样使用，比如背景重复等。没有跨域问题，无需考虑缓存、文件头或者cookies问题。我也来update：总体建议：两者各有优势。如果是大量简单小图片、长时间不需要修改的、需要重复平铺的，可以考虑用base64。如果是经常需要修改的、图片复杂或比较大的、没有重复平铺需要的，以CSSSprites为优。如果访问量巨大到一定程度，CSSSprites多出的一个请求对服务器来说有可能会成为一个大的消耗，如果服务器资源紧缺的话可以考虑全部base64。就客户端而言，对base64解码和对图片解码，性能负担差距不大，一般可以不用太多考虑。