已经是 2019 年了，我们是时候决定使用 GIF 了（ - 这里我们谈论的是英语发音，对我们来说这不相关 - 大约。 翻译）。 GIF 占用大量空间（通常是几兆字节！），如果您是 Web 开发人员，这完全违背您的愿望！ 作为一名 Web 开发人员，您希望最大限度地减少用户需要下载的内容，以便网站快速加载。 出于同样的原因，您可以缩小 JavaScript、优化 PNG、JPEG，有时还可以转换 。 但是旧的 GIF 该怎么办呢？
我们去的地方不需要 GIF！
如果您的目标是提高网站加载速度，那么您需要摆脱 GIF！ 那么如何制作动画图片呢？ 答案是视频。 在大多数情况下，您将获得更好的质量并节省 50-90% 的空间！ 生活中，大多数事情都有其优点和缺点。 当你用视频代替 GIF 时，通常你不会发现任何缺点。
打倒所有 GIF！
幸运的是，近年来用视频替换 GIF 已很常见，因此所有必要的工具都已投入使用。 在这篇文章中，我不会重新发明轮子，而只会稍微改进现有的解决方案。 所以要点是：
- 拍摄 GIF 并将其转换为视频
- 使用 H.264 或 VP9 对视频进行编码，即压缩并打包到 MP4 或 WebM 容器中
- 代替
<img>开启 GIF 动画<video>带滚轮 - 打开无声自动播放和循环播放以获得 GIF 效果
Сейчас 2019 年
现在已经2019年了。 进步在前进，我们必须跟上。 到目前为止，我们有两种编解码器选项，在所有浏览器和视频编码工具中得到广泛支持：
- H.264 - 2003 年推出，如今使用最广泛
- VP9 - 于 2013 年出现，与 H.50 相比，压缩率提高了近 264%，尽管 并非一切并不总是那么美好
注： 虽然H.265是H.264的下一个版本，并且有能力与VP9竞争，但由于浏览器支持较差，我不考虑它，如页面所示 。 许可成本是 H.265 没有像 H.264 那样普及以及开放媒体联盟联盟正在使用免版税编解码器 AV1 的主要原因。
请记住，我们的目标是将巨大的 GIF 缩小到尽可能小的尺寸，以加快加载时间。 如果我们的武器库中没有新的视频压缩标准，那么 2019 年将会很奇怪。 但它确实存在并且被称为 AV1。 使用 AV1，您可以 。 莱波塔！ 🙂
AV1自2019年起竭诚为您服务！
在桌面上
最近桌面版本添加了对 AV1 视频解码的支持 и 。 目前 Firefox 支持存在问题，可能会导致崩溃，但随着添加，情况应该会有所改善 已经在 Firefox 67 中 ( - 大约。 译）。 有关新版本的详细信息，请阅读 -
在智能手机上
由于缺乏合适的解码器，目前智能手机不具备硬件支持。 您可以进行软件解码，尽管这会导致电池消耗增加。 第一批支持 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 中创建视频非常简单。 并使用下面的命令。 我们使用 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 缩放到 720 像素宽和 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 是符合我们目的的正确选择。 我在这里拍摄了免费的《钢铁之泪》视频 ，并使用与 AV1、VP9、H.264 编解码器大致相同的比特率进行转换。 结果如下，您可以自己进行比较。
笔记1： 如果您无法加载下面的文件，则可能需要更新您的浏览器。 我会推荐基于 Chromium 的浏览器，例如 Chrome、Vivaldi、Brave 或 Opera。 以下是有关 AV1 支持的最新信息
笔记2： 对于 Linux 上的 Firefox 66，您需要设置标志 media.av1.enabled 转化为意义 true в about:config
笔记3： 我决定不包含下面的常规 GIF，因为它们尺寸较大且加载此页面需要大量数据！ （这很讽刺，因为这个页面是关于减少页面上的数据量:)）。 但你可以在这里看到最终的 GIF
译者注： Habr 不允许您启用自动播放和循环文件，因此您只能评估质量。 你可以现场看到“动画图片”是什么样子 .
场景 1 @ 200 Kbps
这里有很多运动，在低比特率下尤其敏感。 您可以立即看到 H.264 在该比特率下有多糟糕；方块立即可见。 VP9 稍微改善了情况，但方块仍然可见。 AV1 显然获胜，产生了明显更好的图像。
H.264
VP9
AV1
场景 2 @ 200 Kbps
这里有很多半透明的 CGI 内容。 结果与上次不同，但总体而言 AV1 看起来更好。
H.264
VP9
AV1
场景 3 @ 100 Kbps
在这个场景中，我们将比特率调低至 100 Kbps，结果是一致的。 即使在低比特率下，AV1 仍保持领先地位！
H.264
VP9
AV1
蛋糕上的樱桃
通过感受与 GIF 相比节省的带宽量来结束本文 - 所有视频的总大小更高...... 1.62MB！！ 正确的。 大约有 1,708,032 字节！ 为了进行比较，以下是每个场景的 GIF 和 AV1 视频大小
的GIF
AV1
场景1
11.7 MB
0.33 MB
场景2
7.27 MB
0.18 MB
场景3
5.62 MB
0.088 MB
简直叹为观止！ 是不是？
注： VP9 和 H264 的文件大小没有给出，因为由于使用相同的比特率，它们实际上与 AV1 没有什么不同。 再添加两列相同大小的列是多余的，只是为了强调这些编解码器在文件大小小得多的情况下产生比 GIF 更好的质量。
来源： habr.com