このページは Cloud Translation API によって翻訳されました。

AVIF 画像の配信

1. はじめに

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

AVIF とは

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

AVIF を使用する理由

AVIF 画像は、画質が同等かそれ以上の JPEG、PNG、GIF、WebP 画像よりもはるかに小さくなります。

学習内容

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

必要なもの

Chrome バージョン 85 以降
テキストエディタ
cmake
git
忍者
画像。こちらで作成したものです
FFmpeg

2. Squoosh を使用した AVIF 画像の作成

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

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

Squoosh のスクリーンショット

[Compress] プルダウンボックスで [AVIF] を選択します。

Squoosh プルダウンボックス

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

Squoosh のダウンロードボタン

元のサンプル画像は 3340 KB で、圧縮後の画像は 378 KB です。サンプル画像は、元の画像のほぼ 10 分の 1 に圧縮されました。

AVIF イメージをダウンロードする

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

これで独自の AVIF 画像が作成されました。

3. コマンドラインエンコーダ avifenc をビルドする

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

コードを取得します。

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

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

cd libavif/

avifenc と libavif を設定してビルドするには、さまざまな方法があります。詳細については、libavif をご覧ください。avifenc をビルドして、av1 エンコーダおよびデコーダライブラリ libaom に静的にリンクします。

libaom を取得してビルドします。

libavif 拡張機能ディレクトリに移動します。

cd ext

次のコマンドは、libaom のソースコードを pull し、libaom を静的にビルドします。

./aom.cmd

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

cd ../

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

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

mkdir build

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

cd build

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

cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

avifenc をビルドします。

make

avifenc が正常にビルドされました。

4. avifenc を使用した AVIF 画像の作成

デフォルトの設定で AVIF イメージを作成します。

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

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

Avifenc には、品質と速度の両方に影響を与えるオプションが多数あります。オプションを表示して詳細を確認するには、./avifenc を実行します。

これで、独自の 2 つ目の AVIF 画像が作成されました。

エンコーダを高速化する。

マシンのコア数に応じて変更してもよいパラメータの一つは、--jobs パラメータです。このパラメータは、avifenc が AVIF 画像の作成に使用するスレッド数を設定します。このコマンドラインを実行してみてください。

./avifenc happy_dog.jpg example.avif --jobs 8

これにより、AVIF 画像の作成時に 8 つのスレッドを使用するよう avifenc に指示します。私のマシンでは、これにより AVIF エンコードが 5 倍高速になります。

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

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

html ファイルを開く 1 つの方法は、avif_example.html を Chrome にドラッグすることです。html ファイルを開くもう 1 つの方法は、HTTP サーバーから avif_example.html を提供することです。

これで、AVIF 画像が Chrome でレンダリングされます。画像を右クリックして Save image as... を選択すると、example.avif を含むダイアログボックスが表示されます。または、Chrome デベロッパーツールを開いて、example.avif がダウンロードされていることを確認します。

6. アニメーション AVIF 画像の作成

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

avifenc は、アニメーション AVIF 画像を作成するための入力として y4m をサポートします。y4m ファイルを作成する際は、FFmpeg を使用することをおすすめします。

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

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

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

avifenc 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 ファイルを開くもう 1 つの方法は、HTTP サーバーから avif_animated_example.html を提供することです。

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

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

アニメーションスケート場

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

7. 完了

AVIF 画像のサービングに関する Codelab が完了しました。

AVIF を使用して画像を小さくし、ウェブ経由で送信する際の効率を向上させる方法がおわかりいただけたでしょうか。AVIF の機能について詳しくは、Jake Archibald による投稿をご覧ください。