Google では、画像によるウェブサイトの肥大化について頻繁に報告しており、Lighthouse などのツールでは、画像の読み込みがユーザー エクスペリエンスに悪影響を及ぼす場合（読み込み時間が長くなったり、より重要なリソースの帯域幅を浪費したりするなど）に注目しています。この問題を解決する方法の一つは、最新の圧縮を使用して画像のファイルサイズを小さくすることです。ウェブ デベロッパー向けの新しいオプションは、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 や他のメンバー企業の多くの制作サービスで使用されています。libaom 2.0.0 リリース（Chrome で AVIF サポートが追加されたのと同時期）から最新の 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 を使用すると、新旧の他の形式とを簡単に比較できます。 Node アプリを対象とした 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 のソースコードを取得し、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 | SSIM に合わせて調整する（デフォルトでは PSNR に合わせて調整） |
| -- ジョブ J | J ワーカー スレッドを使用（デフォルト: 1） |
| --速度 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 画像が作成されました。
エンコーダの高速化
マシンのコア数に応じて変更できるパラメータの一つは、--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 スレッドが使用されるため、AVIF エンコードが約 5 倍高速化されます。
Largest Contentful Paint（LCP）への影響
画像は、Largest Contentful Paint（LCP）指標の一般的な候補です。LCP 画像の読み込み速度を改善する一般的な推奨事項の一つは、画像を確実に最適化することです。リソースの転送サイズを小さくすることで、リソースの読み込み時間を改善できます。これは、画像である LCP 候補を処理する場合にターゲットとする 4 つの主要なフェーズの 1 つです。
画像を最適化する場合は、画像 CDN を使用することを強くおすすめします。ウェブサイトのビルドプロセスで画像最適化パイプラインを設定するよりも、手動でエンコーダ バイナリを使用して画像を手動で最適化するよりもはるかに手間が少ないからです。ただし、画像 CDN は、プロジェクトによっては費用がかかりすぎる場合があります。このような場合は、avifenc エンコーダを使用して最適化する際に次の点を考慮してください。
- エンコーダのオプションをよく理解してください。AVIF の一部のエンコード機能を試すことで、十分な画質を維持しながらさらに費用を節約できる可能性があります。
- AVIF は、非可逆エンコードと可逆エンコードの両方に対応しています。画像の内容によっては、あるタイプのエンコードが別のタイプのエンコードよりも優れている場合があります。たとえば、通常は JPEG として提供される写真は非可逆エンコードで最適に行われますが、可逆エンコードは通常は PNG 形式で配信される単純なディテールや線画を含む画像に最適です。
- imagemin のコミュニティ サポートを備えたバンドラを使用する場合は、imagemin-avif パッケージを使用して、バンドラが AVIF 画像のバリアントを出力できるようにすることを検討してください。
AVIF でテストすることにより、LCP 候補が画像の場合のウェブサイトの LCP 時間を改善できる場合があります。LCP の最適化について詳しくは、LCP の最適化に関するガイドをご覧ください。
おわりに
libaom、libavif などのオープンソース ツールを使用すると、AVIF を使用してウェブサイトで最適な画質とパフォーマンスを実現できます。この形式はまだ比較的新しく、最適化とツールの統合は積極的に開発されています。ご質問、ご意見、機能リクエストなどがありましたら、av1-discuss メーリング リスト、AOM GitHub コミュニティ、AVIF wiki からお知らせください。