用视频替换 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 编码器只能处理尺寸均匀(例如 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 文件为 551 KB,WebM 文件为 341 KB。

在本例中,初始 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。