如何在命令行上制作和优化GIF动画

引言

除了JPG和PNG之外，自1990年代以来，GIF是最常见的图像格式之一。与JPG和PNG不同，GIF可以包含多个动画帧，而谦卑的“动态GIF”是互联网的一个普遍组成部分。

GIF动画实际上是一项古老的技术，在许多情境下，通过嵌入网络视频效率要比GIF高。这是因为大多数网络视频采用了现代视频压缩技术和比GIF更流行的现代编解码器。编解码器用于将视频进行编码和解码，大多数平台都有专用硬件来播放这些编解码器。而GIF则总是通过CPU直接解码。低分辨率、只包含少数帧动画的GIF的CPU开销可以忽略不计，但如果你创造一个分辨率和帧率与YouTube视频相当的GIF，你会对它消耗的系统资源感到惊讶。

然而，尽管如此，GIF仍然非常有用，因为它们被视为图片而不是视频。由于互联网和其他应用程序的工作方式，这意味着它们可以在更多的情境中自动渲染和播放动画，并且不需要单独嵌入或链接。这对于从反应图片到交互式小说开发或其他演示格式都非常方便。

在本教程中，你将尝试使用几个工具来将视频剪辑制作成GIF动画，并对其大小和质量进行优化，确保它们可以在多种环境中使用。你也可以将这些工具结合起来，集成到另一个应用程序堆栈中。

前提条件

本教程将提供 Ubuntu 22.04 服务器的安装说明。您可以根据我们关于 Ubuntu 22.04 的初始服务器设置指南来进行设置。

你还需要安装Homebrew软件包管理器以便在本教程中安装其中一个工具。

步骤一 — 安装 ffmpeg、Gifski 和 Gifsicle

在这个教程中，你将需要三个工具来跟随示例。第一个是：ffmpeg用于剪切和处理视频，然后是Gifski用于创建GIF动画，最后是Gifsicle用于优化和进一步处理你的GIF动画。这些工具在大多数平台上都可以使用。

无论是ffmpeg还是gifsicle都可以在Ubuntu的默认软件源中找到，可以使用apt软件包管理器进行安装。首先通过apt update命令更新软件源。

1. sudo apt update

 

然后，使用apt install命令安装ffmpeg和gifsicle软件包。

1. sudo apt install ffmpeg gifsicle

 

最后一个工具gifski可以通过Homebrew安装。使用brew install命令进行安装（由于Homebrew会安装其他依赖项，这可能需要几分钟时间）。

1. brew install gifski

 

你现在已经在你的电脑上安装好了所有必要的工具。接下来，你将开始获取一段样本视频来制作GIF。

第二步 — 下载并检查一个样本视频

你可以从任何已有的视频剪辑中制作GIF。如果你没有想要使用的视频剪辑，你可以使用我们的《Silicon Cloud引入应用平台》视频作为起点。

你可以使用curl从我们的其他服务器上下载这个视频的副本。

1. curl -O https://deved-images.nyc3.cdn.digitaloceanspaces.com/gif-cli/app-platform.webm

 

curl是一种命令行工具，用于进行各种Web请求。在URL后使用-O标志，将指示curl下载远程文件并将其存储为本地的相同文件名。

现在您已经在本地有了视频的副本，可以检查一些其元数据。在尝试创建高质量的GIF时这将很重要。之前安装FFmpeg时，还附带了一个名为ffprobe的命令，可用于检查媒体文件中的分辨率、帧速率和其他信息等。通过运行ffprobe命令来查看您下载的app-platform.webm视频的这些详细信息。

1. ffprobe app-platform.webm

 

… Input #0, matroska,webm, from ‘app-platform.webm’: Metadata: ENCODER : Lavf59.27.100 Duration: 00:01:59.04, start: -0.007000, bitrate: 1362 kb/s Stream #0:0(eng): Video: vp9 (Profile 0), yuv420p(tv, bt709), 1920×1080, SAR 1:1 DAR 16:9, 25 fps, 25 tbr, 1k tbn (default) Metadata: DURATION : 00:01:59.000000000 Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default) Metadata: DURATION : 00:01:59.041000000

以下是一个选项：
输出列出了文件中包含的所有流（通常包括一个视频流和至少一个音频流），以及流的采样率、编解码器和其他属性。从输出中突出显示的信息可以得知，该视频经过编码以1080p的分辨率播放，每秒播放25帧。根据在YouTube上观看的经验，你可能已经知道该视频的长度接近两分钟，这对于一个GIF来说太长了。

这些信息已经足够让你进入下一步，你将从这个视频中截取一段来制作GIF动图。

第三步 —— 从视频中剪辑一个片段

你现在有一个两分钟长的视频文件，你知道它的属性。在将其剪切为GIF之前，你只需要做的是从中提取一个较短的剪辑。

在终端中播放视频并不十分方便，因此你可以在YouTube上观看视频，以找到一个理想的剪辑位置。在本教程中，你将从00:00:09到00:00:12进行剪辑，从而生成一段非常流畅的动画。

你可以通过将app-platform.webm视频传递给ffmpeg来进行那种切割。

1. ffmpeg -ss 00:00:09 -to 00:00:12 -i app-platform.webm -c copy clip.webm

 

这个命令是按照以下方式分解的：

• -ss 00:00:09 -to 00:00:12 is how ffmpeg understands timecodes. In this case, cutting from a starting position to an ending position in the clip. You can also clip based on duration, or to fractions of a second.
• -i app-platform.webm is the path to your input file, preceded by -i.
• -c copy is where you would normally specify an output audio or video codec to ffmpeg. Using copy in lieu of a codec skips reencoding the video at all, which can be much quicker and avoid any loss in quality, as long as you don’t need to target a different output format. Because you’re making this clip into a GIF later anyway, preserving the native input format is fine, and saves time.
• clip.webm is the path to your output file.

这将创建一个名为clip.webm的新三秒视频。您可以使用ls -lh命令验证它的存在并检查其大小。

1. ls -lh clip.webm

 

-rw-r–r– 1 sammy sammy 600K Nov 16 14:27 clip.webm

结果表明，三秒的视频只有600K大小。在下一步中制作GIF时，这将是一个很好的比较点。

第四步 – 将视频转换成GIF图片

现在你有一个三秒钟长的视频和一个心中的上限，可以根据帧率和分辨率制作一个GIF。如果你正在开发一个自动化转换流程，用于上传视频到GIF，从ffprobe自动提取视频分辨率和帧率，并直接传递给接下来的几个命令将会很有帮助。在本教程中，你只需将一些合理的分辨率和帧率数值硬编码到输出中。

在命令行上，你有几个制作GIF的选项。你可以仅使用ffmpeg，但是语法很难改变或理解。

1. ffmpeg -filter_complex “[0:v] fps=12,scale=w=540:h=-1,split [a][b];[a] palettegen [p];[b][p] paletteuse” -i clip.webm ffmpeg-sample.gif

 

请注意，在这个例子中，你将剪辑的分辨率和帧速率大约降低了一半，到了12fps和540p的分辨率。这通常是GIF的一个很好的起点。因为GIF被视为图像，当网页加载时，它们会被完整下载，而不像视频那样逐渐以较低分辨率流播。使用内容分发网络（CDN）可以帮助优化像这样的静态站点资源的传递，但你仍应该尽量避免提供没有特定原因的巨大图像。因此，你应该始终避免使你的GIF比必要的更大；对于图像而言，通常的做法是小于3M。你可以使用ls -lh命令来检查你的新GIF的文件大小。

1. ls -lh ffmpeg-sample.gif

 

-rw-r–r– 1 sammy sammy 2.0M Nov 16 14:28 ffmpeg-sample.gif

您通过这种方式创建了一个2M的GIF。虽然这很好，但是您可以通过使用更简单的语法来产生更好的结果。尝试使用gifski命令。

1. gifski –fps 12 –width 540 -o gifski-sample.gif clip.webm

 

注意只需要保留重要的细节——帧率和分辨率——以及输入和输出文件名。之后检查输出文件。

1. ls -lh gifski-sample.gif

 

-rw-r–r– 1 sammy sammy 1.3M Nov 16 14:33 gifski-sample.gif

这个只有1.3兆，质量水平上有着显著的改善。此时，你可能会想尝试制作全帧率、全分辨率的GIF版本。这里提供一个比较的参考点：

1. gifski –fps 25 –width 1080 -o gifski-high.gif clip.webm

 

请检查一下这个最后一个测试文件的大小。

1. ls -lh gifski-high.gif

 

-rw-r–r– 1 sammy sammy 6.9M Nov 16 14:37 gifski-high.gif

以你的原始视频剪辑只有0.6M的情况来看，6.9M无疑实在太大了！要记住，与现代视频编解码器相比，GIF并不特别高效。在将它们编码成合理的文件大小时，你需要做些小幅度的妥协。在本教程的最后一步，你将进一步优化你的GIF。

第五步——优化、验证和查看GIF图像

在本教程的最后一步，您将使用gifsicle来改进您的GIF图像。gifsicle对于GIF图像就像ffmpeg对于音频和视频一样：它几乎可以完成任何任务，但结果可能会变得相当复杂。因此，您可以继续使用gifski来创建GIF图像，并专注于使用一些gifsicle命令来改进或操作它们。

首先运行一个标准的gifsicle优化命令。

1. gifsicle -O3 –lossy=80 –colors 256 gifski-sample.gif -o optimized.gif

 

在此命令中，您提供了-O3选项来进行最激进的优化，–lossy 80允许图像质量从源输入最多损失20％，并且–colors 256用于在输出图像中使用最多256种颜色。由于GIF不像视频编解码器一样使用现代的逐帧视频压缩技术，也不默认使用JPEG风格的图像压缩技术，因此这将产生比您预期更高质量的图像，并且几乎看不到图像质量的明显损失。此外，在这种情况下，256种颜色指的是基于您的GIF中已有的颜色的256种颜色调色板，而不是仅限于最常见的256种颜色的受限调色板，如您可能与小调色板相关联的情况。总的来说，GIF压缩不太会引起明显的感知差异。

与上一步类似，检查优化后的.gif文件的大小。

1. ls -lh optimized.gif

 

-rw-r–r– 1 sammy sammy 935K Nov 16 14:44 optimized.gif

这最后一步成功地将文件大小减小到略大于原始视频，仅为一个非常合理的935K，对于一个动画图像来说。这是之前在本教程中显示的同样优化过的GIF图像。

您可以参考Gifsicle手册来了解有关操纵GIF的其他方法。例如，您可以将GIF“分解”为多个图像文件，每个文件代表动画中的一个帧。

1. gifsicle –explode optimized.gif

 

这将为每个独立的图像创建多个名为optimized.gif.000，optimized.gif.001等的文件。

1. ls -lh optimized*

 

-rw-r–r– 1 sammy sammy 935K Nov 16 14:46 optimized.gif -rw-r–r– 1 sammy sammy 20K Nov 16 14:54 optimized.gif.000 -rw-r–r– 1 sammy sammy 17K Nov 16 14:54 optimized.gif.001 -rw-r–r– 1 sammy sammy 22K Nov 16 14:54 optimized.gif.002 -rw-r–r– 1 sammy sammy 22K Nov 16 14:54 optimized.gif.003 …

你还可以使用 –rotate-90 或 –rotate-180 选项旋转你的GIF。

1. gifsicle –rotate-90 optimized.gif -o rotated.gif

 

尽管GIF并不高效，但它们仍然非常有用，因为几乎可以在任何地方使用。当您需要一个能自动播放的短视频剪辑，或者需要一张特定的图片而不是视频格式时，有时候没有什么可以替代一张经典的GIF。

结论

在本教程中，您使用了多个工具从现有视频中创建了一个优化良好的GIF图像。您还回顾了开源视频处理和GIF处理工具的生态系统，以及其他一些用于进一步编辑GIF图像的选项。GIF图像是一项有趣而陈旧的技术，在许多方面它们并不现代，但在某些情况下仍然没有真正的替代品，并且用于处理GIF图像的工具功能强大且得到良好的维护。话虽如此，祝您明智地使用您的GIF图像。

接下来，你可能想学习如何使用Node.js构建媒体处理API。
(Jiē , nǐ Node.js API.)