用Magick命令调整APNG动画图片大小

最近编写了统计apache日志中访问页面尺寸的简单php程序，发现www.emojiall.com这个网站中最近出现大量Microsoft Teams平台的图片，这是微软新近设计的3D风格Emoji，采用带动画效果的APNG格式，支持真彩色，比传统的GIF动图效果好很多，但唯一的缺点在于每个图片的尺寸太大，复杂一些的Emoji图片尺寸超过了1M。一个页面中只有一副或者几幅这样图片的时候还不要紧，但我们网站中的Microsoft Teams平台页中列出上上千个Emoji，虽然采用了异步加载的技术，但也是卡得出不来，毕竟几千个Emoji的APNG图片加起来超过了1G字节。

我们目前的Microsoft Teams图片为256x256尺寸的，其实在平台页只需要60x60的，所以我们想到进行转换以减小文件尺寸。上周我们同事在网上找了一些资料、尝试用PHP程序来进行转换，不过也不太顺利，需要做很多尝试。我翻看自己前几年写过一篇博文《Linux下用ImageMagick的convert批量处理图片》，这个周末也花了一些时间来尝试用magick命令转换APNG动图。

以🥵这个Emoji为例，下面是Microsoft Teams的原图（256x256 1.17MB）：

用普通的convert命令就可以转：

convert -resize 120x120 1f975.png 1f975-120.png 转出120x120的
convert -resize 60x60 1f975.png 1f975-60.png 转出60x60的

但这样都变成了静态图：

如果在输入文件名前加入apng:，例如：

convert -resize 120x120 apng:1f975.png 可以列出几十幅静态图
convert -resize 120x120 apng:1f975.png 1f975-120.gif 可以转出GIF动图

但却无法转为动态的APNG图片，查了资料，需要安装ffmpeg，而且是高版本的ffmpeg，再用下面语句转换：

magick APNG:1f975.png -resize 120x120 APNG:1f975-120.png
magick APNG:1f975.png -resize 60x60 APNG:1f975-60.png

这样可以转成功，但120x120的尺寸却比以前的256x256更大了，还需要优化，比较简单的办法是减少颜色，下面是加转换参数-colors 8减少到8色（注意是8色，不是2^8=256色）的：

这显然效果太差，再加参数-colors 256改为256色的：

这样的效果就还可以，尺寸也不算很大（694KB、285KB），但还剩下一个问题，就是流汗下来有拖影，与原始apng不同。

这个问题很折磨人，我阅读了很多资料，进行各种尝试：

• 尝试了 Annotated List of Command-line Options中的几乎所有有关参数
• 查看了 Convert Between Image Formats 文档
• 学习了 ImageMagick v6 Examples -- Animation Basics 基础动画知识，特别是-set dispose 2 （'Previous'）
• 还有 ImageMagick v6 Examples -- Animation Modifications
• 研读了 ImageMagick Examples -- Basic Usage，特别用到其中的mogrify来批量转换

又找了一个在线查看APNG的网站，把转换前和转换后的APNG的逐帧图片打开对比：

上面是原始图片，下面是带有拖尾的转换后图片：

再次测试-set delay xxx, -set dispose xxx等参数，最后也是解决了，具体办法：

magick APNG:1f975.png -resize 60x60 -colors 256 -set dispose 2 APNG:1f975-60.png
magick APNG:1f975.png -resize 120x120 -colors 256 -set dispose 2 APNG:1f975-120.png

转出来的尺寸：

• 1f975-60.png 204k
• 1f975-120.png 456k

效果：

最后一步是批量运行，加上mogrify直接修改而不是复制一份：

magick mogrify -resize 60x60 -colors 256 -set dispose 2 APNG:60/microsoft-teams/*.png
magick mogrify -resize 120x120 -colors 256 -set dispose 2 APNG:120/microsoft-teams/*.png

统计三种目录下的尺寸，缩小了一些：

• 240/microsoft-teams/ 1.8G
• 120/microsoft-teams/ 812M
• 60/microsoft-teams/ 359M

这样用户访问Microsoft Teams平台页的时候图片尺寸减少到以前的大约1/5，卡顿情况大为缓解。👌