你是否曾在 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 编码器仅适用于尺寸均匀的文件,例如 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 图片替换为视频
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。