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年ですね。 進歩は前進しており、私たちはそれに追いついていかなければなりません。 これまでのところ、すべてのブラウザーとビデオ エンコード ツールで広くサポートされている XNUMX つのコーデック オプションがあります。
- H.264 - 2003 年に導入され、現在最も広く使用されています
- VP9 - 2013 年に登場し、H.50 と比較してほぼ 264% の圧縮向上を達成しましたが、 すべてが必ずしもバラ色というわけではない
注意： H.265 は H.264 の次のバージョンであり、VP9 と競合することができますが、ページに示されているように、ブラウザのサポートが不十分なため、考慮していません。 。 H.265 が H.264 ほど普及していない主な理由、また、Alliance of Open Media コンソーシアムがロイヤリティフリーのコーデック AV1 を使用している主な理由は、ライセンス コストです。
私たちの目標は、読み込み時間を短縮するために、巨大な GIF を可能な限り小さいサイズに縮小することであることに注意してください。 私たちの武器にビデオ圧縮の新しい標準がなかったら、2019 年は奇妙な年になっていたでしょう。 しかし、それは存在しており、AV1 と呼ばれています。 AV1 を使用すると、次のことができます 。 せせらぎ！ 🙂
AV1 は 2019 年からサービスを提供しています。
デスクトップ上
最近、AV1 ビデオ デコードのサポートがデスクトップ バージョンに追加されました。 и 。 現時点では Firefox のサポートにはバグがあり、クラッシュを引き起こす可能性がありますが、次の機能を追加すると改善されるはずです。 Firefox 67 にはすでに搭載されています ( — 約翻訳）。 新しいバージョンの詳細については、以下を参照してください -
スマートフォンの場合
適切なデコーダーが不足しているため、現時点ではスマートフォンのハードウェア サポートはありません。 ソフトウェア デコードも可能ですが、バッテリーの消費量が増加します。 AV1 ハードウェア デコードをサポートする最初のモバイル SOC は 2020 年に登場する予定です。
そして、この記事の読者は、「携帯電話がまだ AV1 を適切にサポートしていないのに、なぜ AVXNUMX を使う必要があるのでしょうか?」と考えます。
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 を XNUMX 回実行します。 初めて結果を存在しないファイルに書き込みます。 これにより、ffmpeg の XNUMX 回目の実行に必要なログが作成されます。
# 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 fps ビデオの代わりに幅 12 ピクセル、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 が目的にとって正しい選択であることを確認しましょう。 ここで入手できる無料の Tears Of Steel ビデオを撮影しました 、AV1、VP9、H.264 コーデックに対してほぼ同じビットレートを使用して変換しました。 結果は以下にありますので、ご自身で比較してください。
注1： 以下のファイルが読み込まれない場合は、ブラウザを更新してください。 Chrome、Vivaldi、Brave、Opera などの Chromium ベースのブラウザをお勧めします。 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 と実質的に変わらないため、記載されていません。 同じサイズの列をさらに XNUMX つ追加するのは冗長ですが、これは、これらのコーデックがはるかに小さいファイル サイズで GIF よりもはるかに優れた品質を生成することを強調するためです。
出所： habr.com