GIF没有.gif：目前最出色的图像和视频选项

告别GIF时代！高效网页动画的最佳实践

还在使用过时的GIF动画？其实，如今有更多高效、性能更佳的替代方案！本文将深入探讨如何用更现代的技术实现流畅的循环视频动画，并兼顾浏览器兼容性和用户体验。

使用HTML <video></video> 元素

利用HTML的<video></video>元素，轻松重现GIF动画效果：

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

这段代码实现自动播放、循环播放、静音以及内联播放（避免全屏播放）。然而，视频格式的兼容性问题不容忽视。

视频文件由容器和视频编解码器组成（含音频则另有音频编解码器）。常见的视频容器格式有MP4和WebM。浏览器需要同时支持容器和编解码器才能播放视频。

浏览器对视频格式的支持情况复杂多样，这也是YouTube嵌入式视频如此流行的原因之一。让我们看看有哪些值得考虑的视频格式：

容器格式:

• MP4：自2001年发布，几乎所有浏览器都支持。
• WebM：2010年发布，iOS Safari除外，其他浏览器均支持。

编解码器:

• H.264：所有浏览器都支持。
• HEVC/H.265：H.264的继任者，Safari、Edge和Chrome（105版及以上）支持。
• VP9：VP8的继任者，所有支持WebM的浏览器都支持。
• AV1：Chrome自2018年起支持，Firefox自2019年起支持，Edge和Safari尚未支持。

使用H.264编码的MP4文件兼容性最佳，但质量和文件大小并非最佳。AV1虽然兼容性尚不完善，但作为最新的编解码器，其效率和质量极高，Netflix、YouTube和Vimeo等平台已在部分视频中使用。

为了兼顾新旧浏览器，可以使用多个<source></source>元素，优先指定理想的源文件，然后依次添加备选方案：

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

如果需要使用不同编解码器的多个MP4文件，则需要使用复杂的codecs参数。

大多数视频编辑软件不支持直接导出AV1或WebM格式，需要使用FFmpeg等工具进行转换：

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

将GIF转换为MP4：

ffmpeg -i cats.gif -map_metadata -1 -an opus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" cats.mp4

将视频用作背景，并叠加其他元素，需要使用CSS定位：

.video-parent {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.video-parent video {
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

<video></video>元素的一个缺点是会阻止屏幕休眠。

图片的优势：WebP和AVIF

使用动画WebP或AVIF图像格式，具有以下优势：

• 可以针对不同屏幕尺寸或主题模式（例如深色模式）使用不同的动画图像。
• 原生支持懒加载：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">
• 更容易作为背景图像使用：background-image: url("coolbackground.webp");

可以使用<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">

(表格略，与原文表格相同)

使用动画AVIF

AVIF格式（2019年发布）是目前最佳的图像格式之一，将GIF转换为AVIF可以减少90%以上的字节数：

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

AVIF基于AV1视频编解码器，支持静态和动画图像。

(表格略，与原文表格相同)

使用<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">

这在Safari中可以实现视频背景或边框图像等效果：

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

Safari声称此特性具有性能优势，但Chrome已明确表示不会支持此特性。

尊重用户偏好

视频元素自动尊重用户的自动播放设置和“减少动画”设置。

检查渐进增强

可以使用Chrome DevTools的“Rendering”选项卡来关闭对AVIF和WebP格式的支持，以测试代码的兼容性。

Lottie 动画库

Lottie是一个开源动画库，可以从After Effects导出动画数据（JSON文件）并渲染到网页上。 它支持多种平台，并提供灵活的控制选项，例如播放、暂停、反向播放等。

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

Lottie的性能取决于库大小和JSON文件大小以及生成的DOM元素数量。

结论：没有绝对的最佳方案，选择需根据具体需求和项目情况权衡。

以上是GIF没有.gif：目前最出色的图像和视频选项的详细内容。更多信息请关注PHP中文网其他相关文章！