Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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 のスクリーンショット

[Compress] プルダウンボックスから [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 ファイルを開くもう 1 つの方法は、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 ファイルを開くもう 1 つの方法は、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 画像を作成します。