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 は、画像を AVIF 画像に変換できる画像圧縮ウェブアプリです。

Squoosh を開きます。
ローカル画像を 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 ファイル（example.avif）を avif_example.html と同じディレクトリにコピーします。

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

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

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

これで、AVIF 画像が Chrome にレンダリングされます。画像を右クリックして Save image as... を選択すると、example.avif のダイアログボックスが開きます。もう 1 つの方法は、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 にレンダリングされます。

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

アニメーション付きアイスリンク

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

7. avifenc でアニメーション AVIF 画像を作成する

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

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

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

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