CSS Sprites与base64图片编码的比较

2017年4月17日 | 分类: 【技术】

CSS中,background可以设置对象的背景样式。如颜色或者使用一张图片代替,今天我要多说两句的就是使用一张图片的参数:image。准确的来说应该是background-image。我们可以这样用它:

body{
background-image: url(....jpg);
}

也可以直接使用background 代替:

body{
background: url("....jpg");
}

css显示图片分3种:
1. 单纯的显示一个图片;
2. CSS Sprites,也就是说把若干小图片合成一个大图片,然后通过background的postion参数实现效果,
3. Inline images。这个方法不适用于IE浏览器。

CSS Sprites是一种把所有的图片都以base64编码以源代码的形式写在CSS文件里,格式是这样的:data:[][;base64],

data:URL标签是在1995年第一次提出,按RFC2397规范( http://tools.ietf.org/html/rfc2397 )的描述:

allows inclusion of small data items as ‘immediate’ data.

(允许在页面中包含一些小的即时数据)

如一个内嵌的的图片可以这样引用:

{  background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);  }

这段代码可以在firefox浏览器运行。这行代码的意思是,gif格式的以base64编码成最后的字符串的图片应用为背景。样式应用的结果是一种斜条纹状的背景。

参考:http://tjrus.com/blog/base64-vs-css-sprites-battle-for-performance
参考:http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice

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问题。

方案1+方案2能否实现呢?思考了下,不可以。