CSS Sprites与base64图片编码的比较

在前端页面性能优化的时候，不可避免地会遇到这个问题。我们又该如何选择呢？

情景：有数量相当的小size图片

方案1：使用CSS Sprites合并为一张大图
方案2：使用base64直接把图片编码成字符串写入CSS文件

 

针对方案1：

1.兼容性比较好

2.图片比较复杂时构造体积较小

3.多处重用时无需重复图形内容

4.没有base64编码成本，降低图片更新的维护难度。（但注意Sprites同时修改css和图片某些时候可能造成负担）

 

针对方案2：

1.无额外请求

2.对于极小或者极简单图片来说数据很少

3.可以被gzip。（通过gzip对base64数据的压缩能力通常和图片文件差不多或者更强）

4.降低css维护难度

5.可像单独图片一样使用，比如背景图片重复使用等

6.没有跨域问题，无需考虑缓存、文件头或者cookies问题。