最近编写了统计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，卡顿情况大为缓解。👌
评论