您是否遇到过以下情况：在 Imgur 或 Gfycat 等服务上看到过 GIF 动画，然后在开发者工具中检查后发现它确实是视频？这是有充分理由的动画 GIF 可能非常庞大。
幸运的是，这是加载性能方面相对来说只需付出少量努力就能取得巨大成效的领域之一！通过将大型 GIF 转换为视频，您可以大幅节省用户的带宽。
先衡量
使用 Lighthouse 检查您的网站是否包含可转换为视频的 GIF。在开发者工具中，点击“审计”标签页并选中“性能”复选框。然后运行 Lighthouse 并查看报告。如果您有任何可以转换的 GIF，您应该会看到“为动画内容使用视频格式”建议：
创建 MPEG 视频
有多种方法可以将 GIF 转换为视频，本指南中使用的是 FFmpeg 工具。如需使用 FFmpeg 将 GIF my-animation.gif 转换为 MP4 视频，请在控制台中运行以下命令：
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 抛出“height/width not divisible by 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 图片替换为视频
动画 GIF 具有视频需要复制的三个关键特征：
- 它们会自动播放。
- 它们会连续循环（通常如此，但也可以防止循环）。
- 它们是静音的。
幸运的是，您可以使用 <video> 元素重新创建这些行为。
<video autoplay loop muted playsinline></video>
具有这些属性的 <video> 元素会自动播放、无限循环、不播放音频，并在内嵌（即非全屏）模式下播放，这些都是 GIF 动画应有的典型行为！🎉
最后，<video> 元素需要一个或多个 <source> 子元素，这些子元素指向不同的视频文件，浏览器可以根据浏览器支持的格式进行选择。同时提供 WebM 和 MP4，以便在浏览器不支持 WebM 时，可以回退到 MP4。
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
对 Largest Contentful Paint (LCP) 的影响
请注意，虽然 <img> 元素是 LCP 的候选项，但不带 poster 图片的 <video> 元素则不是 LCP 候选项。在模拟 GIF 动画的情况下，解决方案不是向 <video> 元素添加 poster 属性，因为该图片将不会被使用。
这对您的网站有何影响？建议您坚持使用 <video> 而非动画 GIF，但请注意，此类媒体不会成为 LCP 候选项，系统会改用下一个最大的候选项。由于 GIF 和 <video> 通常较大，因此下载速度较慢，因此改用其他 LCP 候选项甚至可能会改善网站的 LCP。