主持人 > 博客 > 管理 > 是時候用 AV1 影片取代 GIF 了

是時候用 AV1 影片取代 GIF 了

是時候用 AV1 影片取代 GIF 了

已經是 2019 年了，我們是時候決定使用 GIF 了（不，我們不是在談論這個決定！ 我們永遠不會在這裡達成一致！ - 這裡我們談論的是英語發音，對我們來說這不相關 - 大約。 翻譯）。 GIF 佔用大量空間（通常是幾兆位元組！），如果您是 Web 開發人員，這完全違背您的願望！ 身為 Web 開發人員，您希望最大限度地減少使用者需要下載的內容，以便網站快速載入。 基於同樣的原因，您可以縮小 JavaScript、優化 PNG、JPEG，有時還可以轉換 JPEG 到 WebP。 但是舊的 GIF 該怎麼辦呢？

我們去的地方不需要 GIF！

如果您的目標是提高網站載入速度，那麼您需要擺脫 GIF！ 那麼如何製作動畫圖片呢？ 答案是影片。 在大多數情況下，您將獲得更好的品質並節省 50-90% 的空間！ 生活中，大多數事情都有其優點和缺點。 當你用影片取代 GIF 時，通常你不會發現任何缺點。

打倒所有 GIF！

幸運的是，近年來用影片替換 GIF 已很常見，因此所有必要的工具都已投入使用。 在這篇文章中，我不會重新發明輪子，而只會稍微改進現有的解決方案。 所以重點是：

  1. 拍攝 GIF 並將其轉換為視頻
  2. 使用 H.264 或 VP9 對影片進行編碼，即壓縮並打包到 MP4 或 WebM 容器中
  3. 代替 <img> 開啟 GIF 動畫 <video> 附滾輪
  4. 開啟無聲自動播放和循環播放以獲得 GIF 效果

谷歌有很好的文檔描述了這個過程。

現在是 2019 年

現在已經2019年了。 進步在前進，我們必須跟上。 到目前為止，我們有兩種編解碼器選項，在所有瀏覽器和視訊編碼工具中都得到廣泛支援：

  1. H.264 - 2003 年推出，如今使用最廣泛
  2. VP9 - 於 2013 年出現，與 H.50 相比，壓縮率提高了近 264%，儘管 正如他們在這裡寫的 並非一切並不總是那麼美好

注： 雖然H.265是H.264的下一個版本，並且有能力與VP9競爭，但由於瀏覽器支援較差，我不考慮它，如頁面所示 https://caniuse.com/#feat=hevc。 授權成本是 H.265 沒有像 H.264 那樣普及以及開放媒體聯盟聯盟正在使用免版稅編解碼器 AV1 的主要原因。

請記住，我們的目標是將巨大的 GIF 縮小到盡可能小的尺寸，以加快載入時間。 如果我們的武器庫中沒有新的視訊壓縮標準，那麼 2019 年將會很奇怪。 但它確實存在並且被稱為 AV1。 使用 AV1，您可以 與 VP30 相比，壓縮率提高約 9%。 萊波塔！ 🙂

AV1自2019年起竭誠為您服務！

在桌面上

最近桌面版本添加了對 AV1 視訊解碼的支持 谷歌Chrome 70的 и Mozilla的火狐65的。 目前 Firefox 支援存在問題，可能會導致崩潰，但隨著添加，情況應該會有所改善 dav1d 解碼器 已經在 Firefox 67 中 (已經發布，但支援已經出現 - 大約。 譯）。 有關新版本的詳細信息，請閱讀 - 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 縮放到 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 是符合我們目的的正確選擇。 我在這裡拍攝了免費的《鋼鐵之淚》視頻 https://mango.blender.org/，並使用與 AV1、VP9、H.264 編解碼器大致相同的位元率進行轉換。 結果如下，您可以自己進行比較。

注 1： 如果您無法載入下面的文件，則可能需要更新您的瀏覽器。 我會推薦基於 Chromium 的瀏覽器，例如 Chrome、Vivaldi、Brave 或 Opera。 以下是有關 AV1 支援的最新信息 https://caniuse.com/#feat=av1

注 2： 對於 Linux 上的 Firefox 66，您需要設定標誌 media.av1.enabled 進入意義 true в about:config

注 3： 我決定不包含下面的常規 GIF，因為它們尺寸較大且加載此頁面需要大量數據！ （這很諷刺，因為這個頁面是關於減少頁面上的資料量:)）。 但你可以在這裡看到最終的 GIF https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

譯者註： 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 更好的品質。

來源： www.habr.com

添加評論