AVIF をデプロイしてウェブサイトの応答性を高める

AVIF がエコシステムでどのように採用されているかに関する最新情報。

Jani Huoponen
Jani Huoponen
Vignesh Venkatasubramanian
Vignesh Venkatasubramanian

AVIF は、高い圧縮率、効率的なパフォーマンス、幅広い採用により、ウェブ上で急速に普及している新しい画像形式です。AVIF は、Alliance for Open Media によって標準化された AV1 動画コーデックに基づく、オープンでロイヤリティ フリーの画像形式です。このブログ投稿では、AVIF がエコシステムにどのように採用されているか、静止画像とアニメーションで AVIF を使用するとデベロッパーがどのようなパフォーマンスと品質のメリットを得られるかについて概説します。

Chrome、Firefox、Safari で AVIF が導入されて以来、ウェブでの AVIF の使用は着実に増加しています。現在、ほとんどのブラウザが AVIF をサポートしています。

Chrome だけでも、Chrome が安定版で AVIF のサポートを追加してから 1 年余りで、AVIF の使用率は約 1% にまで増加しました。

2021 年 5 月から 2023 年 3 月までの Chrome での AVIF の使用状況を示す折れ線グラフ。支持率は 0% から 1.4% 未満まで着実に増加しています。

現在、AkamaiCloudflareCloudinaryImgix などの多くの画像 CDN が AVIF 画像を提供しています。AVIF のサポートを発表したブログ投稿で、Imgix は JPEG と比較してファイルサイズが 60%、WebP と比較して 35% 削減されると報告しています。ファイルサイズを削減することで、ストレージを大幅に節約できるだけでなく、ページの読み込みが速くなり、Largest Contentful Paint(LCP)時間が短縮されます。LCP は Core Web Vitals の 1 つで、ページ上の最大のコンテンツ ブロックが読み込まれた速さを表します。最新のコーデックを使用して画像を圧縮することは、LCP を短縮するための主な手法の一つです。Lighthouse は、ウェブサイトをテストし、AVIF によってどれだけ節約できるかを確認するのに適した Chrome デベロッパー ツールです。

WordPress は世界で最も人気のあるウェブサイト プラットフォームです。デベロッパーが画像を AVIF に変換するために利用できるプラグインは、次のようなものです。

実践的なデベロッパーの場合は、ImageMagickFFmpeg などのツールをおすすめします。

AVIF エンコード速度

画像圧縮を大規模にデプロイするには、高速なエンコード速度と高い画質が不可欠です。AVIF ソフトウェアのエンコード速度は、この 2 年間で大幅に向上しました。他の最新の静止画像形式と比較して、AVIF では画質が同等でファイルサイズが小さくなります(次のグラフを参照。小さいほど良い)。また、エンコードが速いことも特徴です。

さまざまな画像コーデックのファイルサイズを TurboJPEG の出力の割合で比較した棒グラフ。AVIF が最も低く、次に JPEG XL、WebP、MozJPEG の順に低くなります。

以下のグラフ(値が高いほど良い)は、AVIF のエンコード速度が他の画像形式と比較してどの程度速いかを示しています。WebP などの前世代のコーデックは、複雑さの少ない(ただし効率の低い)圧縮アルゴリズムを利用しています。マルチスレッド エンコード スキームにより、AVIF は一般的なユースケースで同様のパフォーマンスを実現しながら、大幅な圧縮率の向上を実現します。

画像コーデックのエンコード速度の比較。比較対象のエンコーダは、平均的な AVIF、平均的な JPEG XL、平均的な WebP(1 スレッド)、平均的な MozJPEG(1 スレッド)です。一般に、AVIF は最高の品質とデフォルトのエフォートにおいて最速の画像エンコーダの 1 つですが、オンザフライのパフォーマンスではすべてのエンコーダの中で最も遅くなります。

より詳細なエンコード速度と画質の比較については、Image Coding Comparisons のサイトで再現可能なベンチマーク結果をご覧ください。

AVIF や WebP などの最新の画像コーデックのソフトウェア実装は x86 および ARM プロセッサ アーキテクチャ向けに最適化されていますが、大量の画像を大規模に圧縮すると計算コストが高くなる可能性があります。圧縮費用を削減する方法の一つとして、ハードウェア アクセラレーションを検討することもできます。Bluedot は、AMD の Alveo U250 などのプログラム可能な FPGA で動作するハードウェア アクセラレーション Pulsar-AVIF エンコーダを開発しました。ソフトウェアベースの avifenc と比較して、Pulsar-AVIF は同様の圧縮効率で速度が 7~23 倍向上します。

エンコーダ エンコード時間(ミリ秒) フレーム/秒 CPU 使用率 ハードウェアの仕様
Pulsar-AVIF
(FPGA)
60 409.85 305% AMD Alveo U250 1ea + Intel(R) Xeon(R)
Platinum 8171 CPU、2.6 GHz、10 コア
avifenc
(libaom)
405 59.26 3,200% Intel(R) Xeon(R) Platinum 8370C CPU
2.8 GHz、32 コア
avifenc
(SVT-AV1)
1325 18.11 3200% Intel(R) Xeon(R) Platinum 8370C CPU
2.8 GHz、32 コア
AVIF エンコード速度の比較
  • テストセット: Kodak(768x512 の 24 枚の画像)
  • 24 個の画像を同時にエンコードする(24 個のプロセス)
  • 各ソフトウェア エンコード プロセスは 4 つのスレッドで実行されます。(-j 4)


デベロッパーは、Azure NP-Series などのクラウド仮想マシンで Pulsar-AVIF エンコーダをデプロイできます。

レスポンシブ ウェブページ向けの AVIF 機能

AVIF には、レスポンシブなウェブページの配信に役立つ興味深い機能がいくつかあります。今回は、ウェブでクールなアニメーションを配信する最も効率的な方法であるアニメーション AVIF について詳しく説明します。

アニメーション AVIF

アニメーション GIF は、35 年の歴史を誇るにもかかわらず、今でもアニメーション画像用の人気のフォーマットです。アニメーション GIF の最大のデメリットは、256 色のみのサポートと圧縮の低さにより、ファイルサイズが非常に大きくなり、実用的なユースケースでは解像度やフレームレートが制限されることです。一方、アニメーション AVIF コーディングは、実際には AV1 動画コーディング スキームと同じであり、アニメーション GIF と比較してファイルサイズを大幅に削減できます。

簡単なベンチマークを実行し、一連のアニメーション GIF を AVIF と JPEG XL の両方にエンコードしました。テストセット全体で、ファイルサイズ削減率の中央値は、元の GIF ファイルと比較して約 86%、アニメーション JPEG XL ファイルと比較して約 73% でした*。

アニメーション画像コーデックのパフォーマンスの比較。AVIF は、平均ファイルサイズと中央値の両方において、GIF と JPEG XL よりも優れています。
* libavif と libjxl のバージョン: libavif バージョン 4cff6a3(libaom バージョン v3.5.0)、libjxl バージョン 176b1c03。テストセット: Wikipedia から 15 個のサンプル GIF。

Chrome、Firefox、Safari はすべて、アニメーション化された AVIF の再生をサポートしています。

FFmpeg は、アニメーション AVIF ファイルの作成に使用できるツールの 1 つです。FFmpeg を使用して GIF を AVIF に変換する基本的な例を次に示します。

ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"

$CRF は、希望する出力品質を 063 のスケールで示します。値が小さいほど品質が高くなり、ファイルサイズが大きくなります。0可逆圧縮を使用します。小さいアニメーション AVIF ファイルの場合は、23 の値から始めます。

FFmpeg は、AVIF 画像のエンコードにデフォルトで libaom を使用しますが、利用可能な場合は rav1e または SVT-AV1 を使用することもできます。エンコーダの選択、速度と品質のトレードオフを実現するためのエンコード パラメータのチューニングの詳細については、FFmpeg の AV1 エンコード ガイドをご覧ください。

別のユースケースとしては、元のファイルを再エンコードせずに、AV1 動画を AVIF に再パッケージ化することもできます。これは元の AV1 ファイルをデコード / エンコードするよりもはるかに低コストで、AV1 動画を <img> 要素で使用できるようになります。FFmpeg に -c:v copy を渡すことで、この処理を行うことができます。

ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"

まとめ

ウェブでの AVIF の使用は、リリース以来着実に増加しており、ブラウザ、画像 CDN、WordPress プラグイン、エンコード ツールで広くサポートされています。総じて、AVIF はウェブでの画像配信に最適な選択肢です。AVIF は高速でエンコードとデコードを行う一方で、ウェブサイトのお好みに応じて、最高品質または最小ファイルサイズを提供します。AVIF は、ウェブにアニメーションを配信する最も効率的な方法です。質問、コメント、機能リクエストがある場合は、av1-discuss メーリング リストAOM GitHub コミュニティAVIF ウィキからお問い合わせください。

UnsplashAmal S によるヒーロー画像。