您是否曾在 Imgur 或 Gfycat 等服务上看到过动画 GIF，并在开发者工具中检查过它，结果却发现该 GIF 实际上是一个视频？这样做是有充分理由的。动画 GIF 文件可能非常大。
值得庆幸的是，这是加载性能方面的一个领域，您只需做相对较少的工作即可获得巨大的收益！通过将大型 GIF 转换为视频，您可以大大节省用户的带宽。
首先进行测量
使用 Lighthouse 检查您的网站中是否有可以转换为视频的 GIF。在 DevTools 中，点击“Audits”（审核）标签，并选中“Performance”（性能）复选框。然后运行 Lighthouse 并查看报告。如果您有任何可以转换的 GIF，您应该会看到一个“Use video formats for animated content”（为动画内容使用视频格式）的建议。
创建 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 编码器仅适用于尺寸为偶数的文件，例如 320px x 240px。如果输入 GIF 的尺寸为奇数，您可以包含一个裁剪滤镜，以避免 FFmpeg 抛出“height/width not divisible by 2”（高度/宽度不可被 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>
对最大内容渲染 (LCP) 的影响
应该注意的是，虽然 <img> 元素是 LCP 的候选元素，但没有 poster 图片的 <video> 元素不是 LCP 候选元素。在模拟动画 GIF 的情况下，解决方案不是向您的 <video> 元素添加 poster 属性，因为该图片将不会被使用。
这对您的网站意味着什么？建议是坚持使用 <video> 而不是动画 GIF，但要理解此类媒体将不会成为 LCP 的候选元素，而是使用下一个最大的候选元素。由于 GIF 和 <video> 通常较大且下载速度较慢，因此转到不同的 LCP 候选元素甚至可能会提高网站的 LCP。