🍓 🥜 📲 现在该用AV1视频替换GIF了 🌷 📁 🙋🏾

现在是2019年，是时候让我们对GIF做出决定了（不，这与该决定无关！这里我们永远不会同意！ -这里我们谈论的是英语发音，对我们来说这无关紧要-大约Transl。 ）。 GIF占用大量空间（通常为几兆字节！），如果您是Web开发人员，则完全与您的需求相矛盾！作为Web开发人员，您希望最大限度地减少用户需要下载的内容，以便快速加载网站。出于相同的原因，您可以最小化JavaScript，优化PNG，JPEG，有时还可以将JPEG转换为WebP 。但是如何处理旧的GIF？

我们走到哪里，我们不需要GIF！

如果您的目标是提高网站的加载速度，则需要摆脱GIF！但是，如何制作动画图片呢？答案是视频。在大多数情况下，您将获得50-90％的最佳质量和空间节省！在生活中，大多数事物都有其优点和缺点。用视频替换GIF时，找不到最常见的缺点。

放下所有的GIF！

幸运的是，近年来，用视频替换GIF变得司空见惯，因此所有必需的工具都已在使用中。在这篇文章中，我不会重新发明轮子，而只会稍微改进现有的解决方案。所以这是要点：

取得GIF并将其转换为视频
使用H.264或VP9对视频进行编码，即挤压并将其包装在MP4或WebM容器中
将<img>替换为动画GIF，将<video>替换为电影
打开静音自动播放并循环播放以实现GIF效果

Google有一些很好的文档描述了该过程。

现在是2019年

现在是2019年。进步正在向前发展，我们必须跟上它。到目前为止，我们拥有两种版本的编解码器，所有版本的浏览器和视频编码工具均广泛支持它们：

H.264-2003年推出 ，如今使用最广泛
VP9-于2013年问世，与H.264相比，压缩率提高了近50％，尽管正如他们在这里所说的那样，并不是所有事情都是如此，也不总是如此

注意：尽管H.265标准是H.264的下一个版本，并且能够与VP9竞争，但由于浏览器支持不佳，我不认为它是标准的，这在https://caniuse.com/#feat=hevc页面上显示。许可费用是H.265尚未像H.264那样普及的主要原因，也是开放媒体联盟联盟与免版税编解码器（AV1）一起使用的主要原因。

请记住，我们的目标是将巨大的GIF减小到最小尺寸，以加快加载速度。如果我们在武器库中没有视频压缩的新标准，那将是一个奇怪的2019年。但是他现在被称为AV1。与VP9相比，使用AV1可以将压缩率提高大约30％。妖精！ :)

从2019年开始为您提供AV1！

在台式机上

最近，在Google Chrome 70和Mozilla Firefox 65的桌面版本上增加了对AV1视频解码的支持。目前，对Firefox的支持存在漏洞，并可能导致崩溃，但是随着Firefox 67中dav1d解码器的添加（已经淘汰，但已经出现支持 -大约翻译） ，情况应该有所变化。有关新版本的详细信息，请阅读-dav1d 0.3.0版本：更快！

在智能手机上

对于智能手机，由于缺少适当的解码器，目前缺少硬件支持。您可以进行软件解码，尽管这会导致电池消耗增加。首款支持硬件解码AV1的移动SOC将于2020年问世。

在这里，本文的读者是“因此，如果移动设备尚不正常支持，那为什么要使用AV1？”

AV1是一个相当新的编解码器，而我们正处于适应之初。可以将本文视为“做饭时，人们正在振作起来”阶段。仅台式机支持将加快部分受众的网站访问速度。如果目标设备不支持AV1，则旧的编解码器可以用作后备脚本。但是随着用户切换到支持AV1的设备，一切都准备就绪。为此，我们需要创建一个视频标签，如下所示，该标签允许浏览器选择首选格式-AV1 ->> VP9 ->> H.264 。好吧，如果用户使用的视频完全不支持旧设备或导航器（H264不太可能被盗） ，那么他只会看到GIF

 <video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg"> <source src="media/RollingCredits.av1.mp4" type="video/mp4"> <source src="media/RollingCredits.vp9.webm" type="video/webm"> <source src="media/RollingCredits.x264.mp4" type="video/mp4"> <img src="media/RollingCredits.gif"> </video>

创建AV1

在AV1中创建视频很容易。从此处下载适用于您系统的最新ffmpeg版本，并使用以下命令。我们使用2次传递来达到目标比特率。为此，我们将运行ffmpeg两次。我们第一次将结果写入不存在的文件中。这将创建第二次运行ffmpeg所需的日志。

 # Linux or Mac ##  1 ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null && \ ##  2 ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4 # Windows ##  1 ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^ ##  2 ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4

这是参数的描述：

 -i -  . -pix_fmt -   4:2:0       .     ,  4:2:0  . -c:v -   ,    - AV1.<br /> -b:v –  ,    . -filter:v scale -   ffmpeg     .   X:-1   ffmpeg    X,   . -strict experimental -  , .. AV1   . -cpu-used -   ,          .   0-4.   ,    , ,  ,   . -tile-columns -    .  AV1     ,         . -row-mt – ,    ,        . -threads -  . -pass -    . -f -     .    , .. MP4   . -movflags faststart -    ,      .         .

GIF创作

要创建GIF，我使用了以下命令。为了减小尺寸，我将GIF缩放为720px宽和12 fps，而不是原始的24 fps视频。

 ./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12 -filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gif

测试结果

看一次比阅读一百次更好，对吗？让我们确保AV1是适合我们目的的正确选择。我拍摄了免费的《钢之泪》视频，网址为https://mango.blender.org/ ，并使用与AV1，VP9，H.264编解码器几乎相同的比特率对其进行了转换。结果如下，因此您可以自己比较它们。

注意1：如果未从您那里下载以下文件，则可能需要更新浏览器。我建议您使用基于Chromium的浏览器，例如Chrome，Vivaldi，Brave或Opera。这是AV1的最新支持信息https://caniuse.com/#feat=av1

注意2：对于Linux上的Firefox 66，您需要在about:config中将media.av1.enabled标志设置为true 。

注意3：由于它们的尺寸较大以及加载此页面可能需要的数据量，我决定在下面不包括常规GIF！（这将具有讽刺意味，因为此页面用于减少页面上的数据量：））。但是您可以在这里查看最终的GIF， https：//github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIF

译者注： Habr不允许您启用自动播放和循环播放文件，因此仅评估质量。您可以在原始文章中看到“动画图片”的外观。