您是否曾在 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。