HTML5在线合成雪碧图工具

css sprite,也称雪碧图或css精灵图,是前端常见的小图片优化手段。雪碧图通过将多张小图片合成一张大图片,并配合css中background-size、background-position以达到减小小图片请求个数的目的,从而提升页面加载速度。

对一些小图片比较多的网页,使用雪碧图的优势还是比较明显的,类似下面这种雪碧图,如果拆开,使用单个图片,那么可想而知,浏览器得发起无数个图片请求。而使用雪碧图,则只需要一个请求即可,整个的图片大小也不会变大。

关于雪碧图,这里不赘述,下面介绍一下自己手撸的一个雪碧图合成工具。

工具介绍

使用说明

使用方法很简单,只需要上传所需小图片即可自动生成合成图片和对应的css。

1、上传图片

选中所有你所需要合成的文件,点击确定即可。点击确定之后将使用默认设置自动生成合成图片和对应的css。

2、设置

使用右侧设置,distance表示图片之间的间隔,不建议设置为0,图片之间的一点点间隔不会对图片大小产生很大影响。

align表示图片排列方式,可选minimize、horizontal或vertical。默认minimize,表示通过计算获取面积最小的排列方式。horizontal将按照图片顺序横向排列,vertical将图片按照图片顺序竖向排列。

ZOOM SETTING表示放大设置,在高清屏上,我们通常需要使用2倍图或更高倍数图片,这里默认使用2倍样式。修改放大倍数后,对应的css代码将会更改。

设置完成后,点击Apply changes使配置生效,将使用新配置,重新生成图片和css。

3、重做

如果你有一系列小图标需要合成,可以在完成一个大图后,点击设置栏右上角`RE MAKE`按钮,将清空之前的所有图片,此时可以重新上传其他小图片进行合成。注意:此操作保留你之前的设置,重新上传的小图会使用当前的设置进行合成而非默认设置。

关于总面积最小图片排列算法

主要参考 http://www.aaai.org/Papers/ICAPS/2003/ICAPS03-029.pdf 算法。

基本思路

1. 排列矩形集合(S),按照高度从高到低进行排序

2. 取最高的1个矩形(s1)的宽高作为容器(Box)的初始宽高(BoxW,BoxH)

2. s1永远处于Box的左上角。BoxH 不变,BoxW 可以无线延伸

3. 判断第2个矩形(s2)能不能放到 Box 按照从左到右,从高到底这个顺序的空隙里面

- 如果可以:放入 并 判断 BoxW 是否需要延伸

- 如果不可以:放到s1的右边,BoxW 延伸

4. 继续第3步,判断s3, s4, s5......

扩展思路

1. 根据Box的初始高度,可以得到最终最小面积(Best)的第一个样本(Sample)

2. 通过阶梯增加Box的高度(boxHeightStep),得到多个样本

3. 比较每个样本的 面积利用率(U),取最高的那个

相关代码存放在https://github.com/AspenLuoQiang/ife-css-sprites上,欢迎star,欢迎issue。如对该算法有兴趣,可以在GitHub上查看。当然,这肯定不是最佳算法~@~

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180930G1G6CN00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券