调整 Cinemagraph（动画 GIF）大小时的问题答案

【问题标题】：Problems when resizing cinemagraphs (animated GIFs)调整 Cinemagraph（动画 GIF）大小时的问题
【发布时间】：2012-08-30 21:42:31
【问题描述】：

我在调整 Cinemagraph 大小时遇到问题。如果您不知道，它们是仅部分图像动画的 gif，与整个图像动画的常规 gif 相比。这是一个 node.js 示例：

// ![http://i.imgur.com/Qb1m0.gif][1]

var gm = require('gm')

var file = 'Qb1m0.gif',
    frags = file.split('.')

gm(file)
  //.noProfile()
  //.quality(80)
  .resize(200, 200)
  .write(frags[0] + '_200.' + frags[1], function(err) {
    if (err) console.error(err)
  })

// Result:
// ![http://i.imgur.com/eFqak.gif][2]

等效的命令行代码是：

gm convert Qb1m0.gif -resize 200x200 cinema_200.gif

知道发生了什么吗？

原始动画 GIF：

调整大小的动画 GIF：

【问题讨论】：

标签： image image-processing graphics imagemagick graphicsmagick

【解决方案1】：

我确实比 GraphicsMagick 更了解 ImageMagick。对于 ImageMagick，以下语句适用：

如果 GIF 包含透明度，则几乎不可能使用简单的命令行（例如您提供的命令行）直接调整动画 GIF 的大小。
如果动画 GIF 不包含透明度，甚至很难做到这一点。

我认为 GraphicsMagick 也是如此，真的。

背景说明

如果您使用identify 查看原始 GIF，您会发现并非每个帧都具有相同的尺寸：

识别 Qb1m0.gif
 Qb1m0.gif[1] GIF 720x416 720x416+0+0 8 位伪类 256c 920KB 0.000u 0:00.009
 Qb1m0.gif[1] GIF 471x122 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.009
 Qb1m0.gif[2] GIF 471x121 720x416+160+76 8 位伪类 256c 920KB 0.000u 0:00.009
 Qb1m0.gif[3] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.009
 Qb1m0.gif[4] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.009
 Qb1m0.gif[5] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.009
 Qb1m0.gif[6] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.009
 Qb1m0.gif[7] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.009
 Qb1m0.gif[8] GIF 471x122 720x416+160+76 8 位伪类 256c 920KB 0.000u 0:00.009
 Qb1m0.gif[9] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.009
 Qb1m0.gif[10] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.000
 Qb1m0.gif[11] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.000
 Qb1m0.gif[12] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.000
 Qb1m0.gif[13] GIF 471x122 720x416+160+76 8 位伪类 256c 920KB 0.000u 0:00.000
 Qb1m0.gif[14] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.000
 Qb1m0.gif[15] GIF 471x123 720x416+160+75 8 位伪类 256c 920KB 0.000u 0:00.000

这些尺寸变化是 frame 优化动画 GIF 以减小文件大小的结果。

还有其他优化在起作用，它们确实减少了使用的颜色数量。这两种类型的优化都不能很好地与-resize 操作结合使用。

-resize 专为单个图像而设计，并使生成的单个图像看起来尽可能好。这通常会为图像添加新的颜色值。这确实与 GIF 的设计目的相矛盾：使用严格限制的颜色表（最多 256 种颜色）。在动画序列中，下一个图像/帧的-resize 可能会产生与前一个生成的颜色表完全不同的颜色表——但对于一个运行良好的动画，您需要一个跨所有帧的通用颜色表。

-resize 将每个帧图像与其他图像完全分开处理，并且不考虑“帧优化”（它倾向于为放置在公共画布上的每个帧创建不同的宽度+高度它自己的偏移量）。

因此，对于单个图像的有限 GIF 文件格式，调整大小的图像远非理想，更不用说用于动画 GIF 的多个帧。结果是在调整大小的图像中颜色减少。

还有透明度问题：大多数动画 GIF 都大量使用透明度。透明度经常用于实现压缩优化，通常图像的外观根本不需要透明度。

在这种情况下发生的情况是：-resize 在叠加图像中创建半透明像素。当图像保存回 GIF 文件格式时，这些像素随后会转换为完全透明或完全不透明：两者都会对生成的动画产生严重的颜色失真，远离原始颜色。

一般程序

通常，调整动画 GIF 大小的最佳方法是：

合并（取消优化）动画。这将为动画的所有帧创建相同大小的单个图像。
对动画进行完整的 GIF 优化序列：不仅针对 frame 优化，还针对 color 优化。

'简单'命令

要继续运行“简单”调整大小命令试试运气，您可以试试这个：

convert                        \
  http://i.imgur.com/Qb1m0.gif \
 -coalesce                     \
 -resize 200x200               \
  cinema_200.gif

结果：

这个命令可以解决帧优化问题。它将纠正由此产生的问题，但会增加文件大小。

但是，当涉及到边缘时，它可能仍会显示“阶梯”伪影，因为调整大小的帧会出现可怕的锯齿。这是因为抗锯齿需要边缘周围的半透明颜色，但 GIF 无法保存 -resize 运算符生成的半透明颜色。

【讨论】：

嗯，谢谢。我想我会忽略调整cinemagraphs的大小。 Qb1m0.gif[1] GIF 471x122 720x416+160+75 比较第三个和第四个参数的大小是检测电影图像的好方法吗？
可以运行identify -format '%W x %H\n' your.gif直接查询GIF中每一帧的宽高。但是那里可能有没有不同帧大小的电影。我认为最“可靠”的问题是：'(1) 它是 GIF 吗？' 和 '(2) 它是否包含超过 1 帧？' .如果两者的答案都是“是”，那么您可能会有一个动画 GIF。

【解决方案2】：

您也可以尝试添加-layers optimize 更多细节 https://imagemagick.org/script/command-line-options.php#layers

【讨论】：

【解决方案3】：

使用gifsicle 工具也有非常好的与ImageMagick 无关的解决方案，它产生的结果要小得多，而且没有任何闪烁问题，也没有特殊的命令行参数，因此非常简单，工作速度也更快。像这样使用它：

gifsicle --scale 0.25 -i input.gif > output.gif

或

gifsicle --resize 24x24 -i input.gif > output.gif

【讨论】：