/ CssGaga

CssGaga - AutoSprite算法简介

CssGaga最新版(当前是build 163)改进了AutoSprite算法,图片排列紧密程度已完全超越人类,带来的好处是图片面积越小客户端所占内存越小,详见谨慎使用 CSS Sprites

CssGaga是个闭源项目,你只要用就好,不必浪费时间纠结于如何实现

淘宝的文河(yyfrankyy)同学曾问我要过CssGaga的源码,被我拒绝,我觉得授人与鱼不如授人与渔,让他去用Reflector反编译,他说他学过C#

D2前端技术沙龙(北京场)纪录

D:百度空间的编译平台能不能开源,能否推广出来?
李成银:都是基于第三方开发的,但是整体没有开源,包括编码规范公司有差异,不可能迁移过来,大家就算去用很多也要花很长时间;

不打算开源百度编译平台的李成银同学在twitter上说

@ytzong 是完全自动化的么?求小图片拼大图最小面积实现算法。我们现在只做了完全自动垂直合并和水平合并。

@ytzong 求实现方法,还有对于background-position里用到right,bottom等位置是怎么处理的?

我觉得成银看不懂C#,也不想他学了C#转做Windows Phone开发,所以简单介绍下

CssGaga的AutoSprite有两种算法:

  1. 最紧算法:主要参考 Optimal Rectangle Packing: Initial Results
  2. 抄近路算法:如果全部按最紧算法虽然图片的面积是最小的,但是会耗费CssGaga大量的计算时间,这是不能容忍的,如何即紧又快呢?这就是抄近路算法,设置一个因子,所有小于等于此因子的图片视为正方形来排列,在现实当中,根据大部分页面的特点,以小icon居多,其中又以1616居多,所以把16作为因子,小于1616的视为16*16来处理

CssGaga的整个AutoSprite处理流程如下:

  1. 找到所有的slice
  2. 按文件格式分为两组:jpg一组,png/gif一组
  3. 对两组分别运行如下操作 1. 去重
  4. 去除硬盘上不存在的slice
  5. 按抄近路算法的因子来分组
  6. 根据两种算法来计算最终画布大小
  7. 拼图,返回图片位置坐标
  8. 替换css中slice的background-url,并生成background-position

其中第一步还会区分是否为IE6单独使用

其实像文河和成银完全可以把写代码的时间来省出来去推广CssGaga,重复造轮子的成本是很高的