概述

您是否曾经在网页上看过动画 GIF，当您开发工具中检查它，却发现 GIF 是一个视频？这是有理由的，动画 GIF 文件非常巨大，通过将 GIF 转换为视频，可以节省大量用户的带宽。

解决方案

建议您改用 MPEG4/WebM 视频（来提供动画）和 PNG/WebP（来提供静态图片）以减少网络活动消耗的字节数。

创建 MPEG 视频

有多种方法可以将 GIF 转换为视频，FFmpeg是本指南中使用的工具。要使用 FFmpeg 将 GIF 转换为my-animation.gifMP4 视频，请在控制台中运行以下命令：

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

这告诉 FFmpeg 以标志为标志my-animation.gif的输入作为输入，-i并将其转换为名为my-animation.mp4.

libx264 编码器仅适用于具有均匀尺寸的文件，例如 320 像素 x 240 像素。如果输入的 GIF 具有奇数尺寸，您可以包含一个裁剪过滤器以避免 FFmpeg 抛出“高度/宽度不能被 2 整除”错误：

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

创建 WebM 视频

虽然 MP4 自 1999 年就出现了，但 WebM 是一种相对较新的文件格式，最初于 2010 年发布。WebM 视频比 MP4 视频小得多，但并非所有浏览器都支持 WebM，因此生成两者都是有意义的。

要使用 FFmpeg 转换my-animation.gif为 WebM 视频，请在控制台中运行以下命令：

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

比较差异

GIF 和视频之间的成本节省非常可观。

在此示例中，初始 GIF 为 3.7 MB，而 MP4 版本为 551 KB，而 WebM 版本仅为 341 KB！

用视频替换 GIF img 

动画 GIF 具有视频需要复制的三个关键特征：

• 自动播放

• 连续循环（通常，但可以防止循环）。

• 可静止

您可以使用该<video>元素重新创建这些行为。

<video autoplay loop muted playsinline></video>

具有这些属性的<video>元素会自动播放、无限循环、不播放音频和内联播放（即不是全屏），所有这些都是动画 GIF 的标志性行为！