Lighthouse 报告的“优化建议”部分列出了所有 GIF 动画,以及将这些 GIF 转换为视频后预计可节省的秒数:
![Lighthouse “使用视频格式进行动画内容审核”的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/efficient-animated-content/image/a-screenshot-the-lightho-8a0ec21794e2.png?authuser=5&hl=lt)
为什么应将 GIF 动画替换为视频
大型 GIF 无法高效提供动画内容。通过将大型 GIF 转换为视频,您可以大幅节省用户的带宽。 请考虑使用 MPEG4/WebM 视频(用于动画)和 PNG/WebP 视频(用于静态图片)(而不是 GIF)以节省网络字节数。
创建 MPEG 视频
您可以通过多种方式将 GIF 转换为视频。
FFmpeg 是本指南中使用的工具。如需使用 FFmpeg 将 GIF (my-animation.gif
) 转换为 MP4 视频,请在控制台中运行以下命令:
ffmpeg -i my-animation.gif my-animation.mp4
这会告知 FFmpeg 将 my-animation.gif
作为输入(由 -i
标志表示),并将其转换为名为 my-animation.mp4
的视频。
制作 WebM 视频
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 动画有三个关键特征,视频需要模仿:
- 它们会自动播放。
- 它们会不断循环(通常情况下,但可以防止循环)。
- 他们保持沉默。
幸运的是,您可以使用 <video>
元素重新创建这些行为。
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
使用将 GIF 转换为 HTML5 视频的服务
许多图片 CDN 都支持将 GIF 转换为 HTML5 视频。您将 GIF 上传到图片 CDN,图片 CDN 会返回 HTML5 视频。
针对特定堆栈的指南
AMP
对于动画内容,请使用 amp-anim
最大限度地减少内容在屏幕外时的 CPU 使用率。