Google は、画像によるウェブサイト上の肥大化について頻繁に記事や、Lighthouse などのツールでは、画像の読み込みがユーザー エクスペリエンスに悪影響を及ぼす場合（読み込み時間の増加や、より重要なリソースの帯域幅の奪いなど）を明らかにします。これを修正する方法の 1 つは、最新の圧縮を使用して画像のファイルサイズを小さくすることです。ウェブ デベロッパー向けの新しいオプションは AVIF 画像形式です。このブログ投稿では、AVIF 用オープンソース ツールの最近のアップデートについて説明し、libaom と libavif のエンコード ライブラリを紹介します。また、これらのライブラリを使用して AVIF 画像を効率的にエンコードするためのチュートリアルも紹介します。
AVIF は、AV1 動画コーデックに基づく画像形式で、Alliance for Open Media によって標準化されています。AVIF は、JPEG や WebP などの他の画像形式に比べて圧縮率が大幅に向上します。正確な削減額はコンテンツ、エンコード設定、品質目標によって異なりますが、Google やその他の事例では、JPEG と比べて 50% を超える節約を実現しています。
さらに AVIF は、ハイ ダイナミック レンジと広色域、フィルム グレイン合成、プログレッシブ デコードなどの新しい画像機能に対するコーデックとコンテナのサポートを追加します。
最新情報
Chrome M85 に AVIF サポートが導入されて以降、オープンソース エコシステムでの AVIF サポートはさまざまな面で改善されています。
リバオム
Libaom は、Alliance for Open Media の各企業が管理するオープンソースの AV1 エンコーダ / デコーダで、Google やその他のメンバー企業の多くの制作サービスで使用されています。Chrome で AVIF のサポートが追加されたのとほぼ同時期の libaom 2.0.0 リリースから、最新の 3.1.0 リリースまでの間、コードベースには静止画像エンコードの大幅な最適化が追加されています。たとえば、次のようなものが挙げられます。
- マルチスレッドとタイル形式のエンコードを最適化しました。
- メモリ使用量を 5 分の 1 に削減。
- 下のグラフのとおり、CPU 使用率が 6.5 分の 1 に削減。
これらの変更により、AVIF のエンコード（特にサイトで最も頻繁に読み込まれる画像や最も優先度の高い画像）のエンコードコストが大幅に削減されます。サーバーやクラウド サービスで AV1 のハードウェア アクセラレーテッド エンコードを利用できるようになると、AVIF 画像の作成コストは下がり続けます。
リバフ
AVIF のリファレンス実装である Libavif は、Chrome で AVIF 画像のデコードに使用されるオープンソースの AVIF マルチプレクサおよびパーサーです。libaom と併用して、既存の非圧縮画像から AVIF 画像を作成したり、既存のウェブ画像（JPEG、PNG など）からコード変換したりすることもできます。
Libavif は最近、より高度な libaom エンコーダ設定との統合など、より幅広いエンコーダ設定のサポートを追加しました。libyuv と事前乗算されたアルファを使用した高速 YUV から RGB への変換など、処理パイプラインの最適化により、デコード プロセスをさらに高速化できます。最後に、libaom 3.1.0 で新たに追加されたオールイントラ エンコード モードのサポートにより、上記で述べた libaom のすべての改善が実現されます。
avifenc を使用した AVIF 画像のエンコード
AVIF を簡単に試すには、Squoosh.app を使用します。Squoosh は libavif の WebAssembly バージョンを実行し、コマンドライン ツールと同じ機能の多くを公開しています。AVIF を使用すると、新旧の他のフォーマットと AVIF を簡単に比較できます。 ノードアプリを対象とした Squoosh の CLI バージョンもあります。
ただし、WebAssembly は CPU のすべてのパフォーマンス プリミティブにまだアクセスできないため、libavif を最速で実行する場合は、コマンドライン エンコーダ avifenc をおすすめします。
AVIF 画像をエンコードする方法を理解するために、上記の例で使用したソースイメージを使用したチュートリアルを紹介します。開始するには、以下が必要です。
また、zlib、libpng、libjpeg 用の開発パッケージもインストールする必要があります。 Debian および Ubuntu Linux ディストリビューションのコマンドは次のとおりです。
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
コマンドライン エンコーダ avifenc のビルド
1. コードを取得する
libavif のリリースタグを確認します。
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. ディレクトリを libavif に変更します。
cd libavif
avifenc と libavif をビルドするように構成するには、さまざまな方法があります。詳細については、libavif をご覧ください。 AV1 エンコーダ / デコーダ ライブラリ libaom に静的にリンクされるように、avifenc をビルドします。
3. libaom の取得とビルド
libavif の外部依存関係ディレクトリに移動します。
cd ext
次のコマンドは libaom ソースコードを pull し、libaom を静的にビルドします。
./aom.cmd
ディレクトリを libavif に変更します。
cd ..
4. コマンドライン エンコード ツール avifenc をビルドする
avifenc のビルド ディレクトリを作成することをおすすめします。
mkdir build
ビルド ディレクトリに移動します。
cd build
avifenc のビルドファイルを作成します。
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
avifenc をビルドします。
make
avifenc が正常にビルドされました。
avifenc コマンドライン パラメータについて
avifenc はコマンドライン構造です。
./avifenc [options] input.file output.avif
このチュートリアルで使用する avifenc の基本パラメータは次のとおりです。
| Avifenc | |
|---|---|
| --分 0 | 色の最小量子化を 0 に設定 |
| --最大 63 | 色の最大量子化を 63 に設定する |
| --minalpha 0 | アルファの最小量子化器を 0 に設定 |
| --maxalpha 63 | アルファの最大量子化を 63 に設定 |
| -a end-usage=q | レート コントロール モードを一定品質（Q）モードに設定する |
| -a cq-level=Q | 色とアルファの両方の量子化レベルを Q に設定 |
| -a color:cq-level=Q | 色の量子化レベルを Q に設定する |
| -a alpha:cq-level=Q | アルファの量子化レベルを Q に設定 |
| -a tune=シミュレーション | SSIM 用のチューニング（デフォルトは PSNR 用のチューニング） |
| --jobs J | J ワーカー スレッドを使用する（デフォルト: 1） |
| --speed S | エンコーダ速度を 0 ～ 10 で設定（最も遅い順。デフォルト：6） |
cq-level オプションは、色またはアルファの質を制御する量子化レベル（0 ～ 63）を設定します。
デフォルト設定で AVIF 画像を作成する
avifenc が実行する最も基本的なパラメータは、入力ファイルと出力ファイルの設定です。
./avifenc happy_dog.jpg happy_dog.avif
たとえば、量子化レベル 18 で画像をエンコードするには、次のコマンドラインを使用することをおすすめします。
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc には、品質と速度の両方に影響する多くのオプションがあります。オプションとその詳細を確認するには、./avifenc を実行します。
これで、独自の AVIF 画像が作成できました。
エンコーダの高速化
マシンのコア数に応じて変更した方がよいパラメータの 1 つは、--jobs パラメータです。このパラメータは、avifenc が AVIF 画像の作成に使用するスレッドの数を設定します。
コマンドラインでこれを実行してみてください。
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
これにより、AVIF 画像の作成時に 8 つのスレッドを使用するように avifenc に指示できます。これにより、AVIF エンコードが約 5 倍高速化されます。
Largest Contentful Paint（LCP）への影響
画像は Largest Contentful Paint（LCP）指標の一般的な候補です。LCP 画像の読み込み速度を改善するための一般的な推奨事項の 1 つは、画像を最適化することです。リソースの転送サイズを減らすと、リソースの読み込み時間が短縮されます。これは、画像である LCP の候補を扱う際に対象とする 4 つの重要なフェーズの 1 つです。
画像を最適化する際は、画像 CDN の使用を強くおすすめします。ウェブサイトのビルドプロセスで画像最適化パイプラインを設定するか、エンコーダ バイナリを手動で使用して画像を手動で最適化するよりもはるかに少ない労力で済みます。ただし、画像 CDN は、一部のプロジェクトではコストがかかる可能性があります。このような場合、avifenc エンコーダを使用して最適化する際は次の点を考慮してください。
- エンコーダの選択肢をよく理解してください。AVIF の利用可能なエンコード機能をいくつか試すと、十分な画質を保ちながらさらに節約できる可能性があります。
- AVIF は非可逆エンコードと可逆エンコードの両方を行います。画像の内容によっては、ある種類のエンコードが別の種類のエンコードよりも優れていることがあります。たとえば、通常は JPEG で配信されている写真は非可逆エンコードに適しており、可逆エンコードは通常は PNG で配信される単純なディテールや線画を含む画像に最適です。
- imagemin のコミュニティ サポートがあるバンドラを使用している場合は、imagemin-avif パッケージを使用してバンドラが AVIF 画像バリアントを出力できるようにすることを検討してください。
LCP の候補が画像の場合、AVIF を試すことで、ウェブサイトの LCP 時間を改善できる可能性があります。LCP の最適化について詳しくは、LCP の最適化に関するガイドをご覧ください。
まとめ
libaom、libavif、その他のオープンソース ツールを使用すると、AVIF を使用してウェブサイトに最適な画質とパフォーマンスを実現できます。この形式はまだ比較的新しく、最適化とツールの統合が積極的に開発されています。ご質問、ご意見、機能リクエストなどがありましたら、av1-discuss メーリング リスト、AOM GitHub コミュニティ、AVIF Wiki でお問い合わせください。