您是否曾在 Imgur 或 Gfycat 等服务上看到过 GIF 动画，并在开发者工具中检查过它，结果却发现该 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 抛出“高度/宽度不可被 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 动画的标志性
行为！🎉
最后，<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。