浓缩的才是精华：浅析GIF格式图片的存储和压缩 - 腾讯云技术社区(4)_H5之家

提取出每一帧的delay信息，也可以通过工具提供的命令来提取。

gm identify -verbose source.gif gifsicle -I source.gif

在实际应用中，抽帧的间隔gap是根据总帧数frame求出的

frame<8 gap=1 9<frame<20 gap=2 21<frame<30 gap=3 31<frame<40 gap=4 frame>40 gap=5

delay值的计算还做了归一化处理，如果新生成缩略图的帧间隔平均值大于200ms，则统一加速到均值200ms，同时保持原有节奏，这样可以避免极端情况下，缩略图过于迟缓。

具体实现

本文介绍的算法主要应用于手Q热图功能的后台管理系统，使用Nodejs编写。
ImageMagick是一个较为常用的图像处理工具，除了gif还可以处理各类图像文件，有node封装的版本可以使用。
gifsicle只有可执行版本，在服务器上重新编译源码后，采用spawn调起子进程的方式实现。

ImageMagick对于图片信息的解析较为方便，可以直接得到结构化信息。
gifsicle支持命令管道级联，处理图片速度较快。
实际生产过程中，同时采用了两个工具。

const {spawn} = require('child_process'); const image = gm("src2/"+file) image.identify((err, val) => { if(!val.Scene){ console.log(file+" has err："+err) return } let frames_count = val.Scene[0].replace(/\d* of /, '') * 1 let gap = countGap(frames_count) let delayList = []; let totaldelay = 0 if(val.Delay!=undefined){ let i for (i = 0; i < val.Delay.length; i ++) { delayList[i] = val.Delay[i].replace(/x\d*/, '') * 1 totaldelay+=delayList[i] } for (; i < val.Scene.length; i ++) { delayList[i] = 8 totaldelay+=delayList[i] } }else{ for (let i = 0; i < val.Scene.length; i ++) { delayList[i] = 8 totaldelay+=delayList[i] } } let totalFrame = parseInt(frames_count/gap) //判断是否速度过慢，需要进行归一加速处理 if(totaldelay/totalFrame>20){ let scale =(totalFrame*1.0*20)/totaldelay for (let i = 0; i < delayList.length; i ++) { delayList[i] = parseInt(delayList[i] * scale) } } let params=[] params.push("--colors=255") params.push("--unoptimize") params.push("src2/"+file) let tempdelay = delayList[0] for (let i = 1; i < frames_count; i ++) { if(i%gap==0){ params.push("-d"+tempdelay) params.push("#"+(i-gap)) tempdelay=0 } tempdelay += delayList[i] } params.push("--optimize=3") params.push("-o") params.push("src2/"+file+"gap-keepdelay.gif") spawn("gifsicle", params, { stdio: 'inherit' }) })

测试时，采用该算法随机选择50张gif图进行压缩，原尺寸15.5M被压缩到6.0M，压缩比38%，不过由于该算法的压缩比率和具体图片质量、帧数、图像特征有关，测试数据仅供参考。

本文到这里就结束了，原来看似简单的表情包，也有不少文章可做。

谢谢观看，希望文中介绍的知识和研究方法对你有所启发。