首页 > 移动端图片优化

移动端图片优化

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


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


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

前者的优势在于

  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解码和对图片解码,性能负担差距不大,一般可以不用太多考虑。


这两种情况针对的都是图片很少或不会更新使用的,所以在某种程度上,相似度很高(比如都可以减少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酱 也说了多处重用时无需重复图形内容。

【热门文章】
【热门文章】