用视频替换 GIF 动画,加快网页加载速度

你是否曾在 Imgur 或 Gfycat 等服务中看到过动画 GIF,在开发者工具中检查后发现 GIF 真的是视频?这有充分的理由GIF 动画可以非常巨大

显示 13.7 MB gif 的开发者工具网络面板。

幸运的是,这也是加载性能的领域之一,您只需做相对少量的工作即可实现巨大的提升!通过将大型 GIF 转换为视频,您可以大幅节省用户的带宽

先衡量

使用 Lighthouse 检查您的网站是否包含可转换为视频的 GIF。在开发者工具中,点击“审核”标签页并勾选“性能”复选框。然后,运行 Lighthouse 并检查报告。 如果您有任何可转换的 GIF,您应该会看到“针对动画内容使用视频格式”建议:

Lighthouse 审查未通过,请为动画内容使用视频格式。

创建 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 编码器仅适用于尺寸均匀的文件,例如 320x240 像素。如果输入 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,因此同时生成 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 为 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。