AVIF 画像の配信

1. はじめに

ウェブページの読み込みに必要なバイト数の平均値の 60%以上は画像が占めています。AVIF を使用すると、画像のサイズを小さくしてウェブサイトの読み込みを高速化できます。

AVIF とは

AVIF は、AV1 動画ビットストリームから派生した画像形式です。AVIF は圧縮効率を重視して構築されています。

AVIF を使用する理由

AVIF 画像は、JPEG、PNG、GIF、WebP 画像よりも画質が同等以上で、ファイルサイズがはるかに小さくなります。

学習内容

画像から AVIF 画像を作成する方法
ウェブページで AVIF 画像をレンダリングする方法

必要なもの

主要なブラウザ。
テキストエディタ
cmake
git
ninja
画像。こちらに記載しました
FFmpeg

2. Squoosh を使用して AVIF 画像を作成する

Squoosh は画像圧縮ウェブアプリです。Squoosh を使用すると、画像を AVIF 画像に簡単に圧縮できます。

https://squoosh.app を開きます。
ローカル画像を Squoosh にドロップします。

Squoosh のスクリーンショット

[圧縮] プルダウンボックスから [AVIF] を選択します。

Squoosh プルダウンボックス

Squoosh は、画像を AVIF 画像に圧縮します。Squoosh が完了すると、右下に AVIF 画像に関する統計情報とダウンロードボタンが表示されます。

Squoosh のダウンロードボタン

元のサンプル画像は 3,340 kB で、圧縮された画像は 378 kB です。サンプル画像は、元の画像の 10 分の 1 近くまで圧縮されました。

AVIF 画像をダウンロードする

ダウンロードボタンをクリックすると、AVIF 画像がローカルドライブに保存されます。

これで、独自の AVIF 画像が完成しました。

3. コマンドラインエンコーダ avifenc のビルド

avifenc は、PNG 画像と JPEG 画像を AVIF 画像に変換できるコマンドラインアプリケーションです。avifenc は、AVIF 画像をデコードおよびエンコードできるライブラリである libavif を使用します。AVIF に変換したい画像がたくさんある場合は、コマンドラインエンコーダ avifenc を使用するのがおすすめです。

コードを取得します。

git clone https://github.com/AOMediaCodec/libavif.git

libavif ディレクトリに移動します。

cd libavif/

avifenc と libavif をビルドするために構成する方法は多数あります。詳しくは、libavif をご覧ください。libaom エンコーダ、dav1d デコーダ、libyuv 処理ライブラリに静的にリンクされるように avifenc をビルドします。

コマンドラインエンコードツール avifenc をビルドします。

avifenc のビルドディレクトリを作成することをおすすめします。

mkdir build

ビルドディレクトリに移動します。

cd build

avifenc のビルドファイルを作成します。

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

avifenc をビルドします。

make

avifenc のビルドが完了しました。

4. avifenc を使用して AVIF 画像を作成する

デフォルト設定で AVIF 画像を作成します。

avifenc を実行するための最も基本的なパラメータは、入力ファイルと出力ファイルの設定です。

./avifenc happy_dog.jpg example.avif

これで、2 つ目の AVIF 画像が完成しました。

AVIF エンコードの品質を変更します。

通常、AVIF エンコードで変更するパラメータは quality パラメータのみです。quality は、圧縮画像の品質とファイルサイズをトレードオフするパラメータです。たとえば、高画質のファイル（-q 90）は低画質のファイル（-q 20）よりもはるかに大きくなりますが、高画質のファイルの方がはるかにきれいに見えます。

5. ウェブページで AVIF 画像をレンダリングします。

それでは、これまでの努力の成果を世界に公開しましょう。

AVIF 画像を提供するウェブページを作成します。

avif_example.html という名前のファイルを作成します。

テキストエディタで avif_example.html を開き、次のコードを入力します。

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

ソースファイル（この例では happy_dog.jpg）と AVIF ファイル（eaxmple.avif）を avif_example.html と同じディレクトリにコピーします。

ブラウザが AVIF をサポートしている場合は picture 要素を使用して AVIF 画像をレンダリングし、サポートしていない場合は JPEG にフォールバックします。picture 要素について詳しくは、こちらをご覧ください。

Chrome でウェブページを開きます。

html ファイルを開く方法の 1 つは、avif_example.html を Chrome にドラッグすることです。HTML ファイルを開く別の方法として、HTTP サーバーから avif_example.html を提供する方法があります。

これで、AVIF 画像が Chrome でレンダリングされるようになります。これをテストするには、画像を右クリックして Save image as... を選択します。example.avif を含むダイアログボックスが開きます。別の方法として、Chrome デベロッパーツールを開いて example.avif がダウンロードされていることを確認することもできます。

6. FFmpeg を使用してアニメーション AVIF 画像を作成する

アニメーション AVIF 画像を作成します。

次のコマンドを実行して、y4m ファイルからアニメーション AVIF 画像を作成します。

ffmpeg -i ice_qcif_15fps.y4m animated.avif

これで、独自のアニメーション AVIF 画像が完成しました。

アニメーション AVIF 画像をウェブページにレンダリングします。

avif_animated_example.html という名前のファイルを作成します。

テキストエディタで avif_animated_example.html を開き、次のコードを入力します。

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

ソースファイル（上記の例では ice_qcif_15fps.gif）と AVIF ファイル（animated.avif）を avif_animated_example.html と同じディレクトリにコピーします。

Chrome でウェブページを開きます。

html ファイルを開く方法の 1 つは、avif_animated_example.html を Chrome にドラッグすることです。HTML ファイルを開く別の方法として、HTTP サーバーから avif_animated_example.html を提供する方法があります。

これで、アニメーション AVIF 画像が Chrome でレンダリングされるようになります。

提供されたサンプルメディアを使用する場合、おおよそ次のようになります。

アニメーション化されたアイスリンク

アニメーション AVIF 画像かどうかをテストするには、画像を右クリックして Save image as... を選択します。animated.avif のダイアログボックスが開きます。別の方法として、Chrome デベロッパーツールを開いて animated.avif がダウンロードされていることを確認することもできます。

7. avifenc を使用してアニメーション AVIF 画像を作成する

ソースメディアを y4m 形式に変換します。

avifenc は、アニメーション AVIF 画像を作成するための入力として y4m をサポートしています。y4m ファイルを作成する優れた方法として、FFmpeg を使用する方法があります。

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m

アニメーション AVIF 画像を作成します。

次のコマンドを実行して、y4m ファイルからアニメーション AVIF 画像を作成します。

./avifenc ice_qcif_15fps.y4m animated.avif

これで、2 つ目のアニメーション AVIF 画像が完成しました。

アニメーション AVIF 画像をウェブページにレンダリングします。

avif_animated_example.html という名前のファイルを作成します。

テキストエディタで avif_animated_example.html を開き、次のコードを入力します。

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

ソースファイル（上記の例では ice_qcif_15fps.gif）と AVIF ファイル（animated.avif）を avif_animated_example.html と同じディレクトリにコピーします。

Chrome でウェブページを開きます。

これで、アニメーション AVIF 画像が Chrome でレンダリングされるようになります。

提供されたサンプルメディアを使用する場合、次のようになります。

アニメーション化されたアイスリンク

画像がアニメーション AVIF 画像かどうかをテストするには、画像を右クリックして Save image as... を選択します。animated.avif のダイアログボックスが開きます。別の方法として、Chrome デベロッパーツールを開いて animated.avif がダウンロードされていることを確認することもできます。

AVIF エンコードの品質を変更します。

ice_qcif_15fps.gif ファイルは、品質が大幅に低下し、サイズが約 7 倍になっています。品質パラメータを 20 に変更することで、AVIF の品質を ice_qcif_15fps.gif の品質とほぼ同じにすることができます。

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

アニメーション AVIF ファイルと ice_qcif_15fps.gif の画質はほぼ同じですが、GIF ファイルのサイズは約 22 倍です。

8. 完了

AVIF 画像の配信に関する Codelab はこれで完了です。

AVIF を使用すると、画像を小さくしてウェブ経由で効率的に送信できることがおわかりいただけたかと思います。AVIF の機能について詳しくは、Jake Archibald の投稿をご覧ください。

AVIF 画像の配信

1. はじめに

AVIF とは

AVIF を使用する理由

学習内容

必要なもの

2. Squoosh を使用して AVIF 画像を作成する

3. コマンドライン エンコーダ avifenc のビルド

4. avifenc を使用して AVIF 画像を作成する

5. ウェブページで AVIF 画像をレンダリングします。

6. FFmpeg を使用してアニメーション AVIF 画像を作成する

7. avifenc を使用してアニメーション AVIF 画像を作成する

8. 完了

3. コマンドラインエンコーダ avifenc のビルド