您是否曾在 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 像素）的文件 乘以 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 版本为 3.7 MB， 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。