エコシステムにおける AVIF の採用方法に関する最新情報。
AVIF は、高い圧縮率、効率的なパフォーマンス、幅広い採用により、ウェブ上で急速に人気を集めている新しい画像形式です。AVIF は、Alliance for Open Media によって標準化された AV1 動画コーデックをベースとした、ロイヤリティフリーのオープンな画像形式です。このブログ投稿では、エコシステムにおける AVIF の採用方法と、デベロッパーが AVIF によって静止画像やアニメーションに対して期待できるパフォーマンスと品質面でのメリットについて説明します。
AVIF エコシステムの新機能
Chrome、Firefox、Safari に AVIF が導入されて以来、ウェブ上での AVIF の使用は着実に増加しています。現在では、ほぼすべてのブラウザが AVIF をサポートしています。
Chrome だけでは、Chrome が Stable 版で AVIF サポートを追加してから 1 年ほどで、AVIF の使用率が約 1% に増加しました。
現在、Akamai、Cloudflare、Cloudinary、Imgix などの多くの画像 CDN が AVIF 画像を配信しています。AVIF のサポートを発表したブログ投稿で、Imgix は JPEG と比べてファイルサイズを 60%、WebP と比べて 35% の圧縮率を報告しています。このようにファイルサイズを削減することで、ストレージの大幅な削減が可能になりますが、ページの読み込みが速くなるため、Largest Contentful Paint（LCP）時間が短縮されます。LCP は Core Web Vitals の 1 つで、ページ上の最大コンテンツ ブロックが読み込まれる速度を表します。最新のコーデックを使用して画像を圧縮することは、LCP を削減するための重要な手法の一つです。Lighthouse は、ウェブサイトのテストや、AVIF によるコスト削減の確認に役立つ Chrome デベロッパー ツールです。
WordPress は世界で最も普及しているウェブサイト プラットフォームで、デベロッパーが画像を AVIF に変換するために利用できるプラグインは数多くあります。以下に例を示します。
実践的なデベロッパーには、ImageMagick や FFmpeg などのツールの利用をおすすめします。
AVIF エンコード速度
画像圧縮を大規模に展開するには、高速なエンコード速度と高い画質が不可欠です。AVIF ソフトウェアのエンコード速度は、過去 2 年間で大幅に向上しています。最新の他の静止画像形式と比較すると、AVIF は同様の画質の小さなファイルを生成します（次のグラフを参照、小さいほど優れています）。ただし、エンコードのほうが高速です。
下の表（値が大きいほど良い）は、他の画像形式と比較した AVIF エンコード速度を示しています。WebP のような前世代のコーデックでは、あまり複雑ではない（ただし効率も低い）圧縮アルゴリズムを利用できます。マルチスレッドのエンコード スキームを使用している AVIF は、一般的なユースケースで同様のパフォーマンスを実現しながら、圧縮率を大幅に向上させます。
エンコード速度や画質を比較すると、Image Coding Comparisons サイトで再現性のあるベンチマーク結果を確認できます。
AVIF や WebP などの最新の画像コーデックのソフトウェア実装は x86 および ARM プロセッサ アーキテクチャ向けに最適化されていますが、膨大な量の画像を大規模に圧縮すると計算コストが高くなる可能性があります。圧縮費用を削減する代替策の一つは、ハードウェア アクセラレーションを検討することです。Bluedot は、AMD の Alveo U250 などのプログラマブル FPGA で動作する、ハードウェア アクセラレーションによる Pulsar-AVIF エンコーダを開発しました。ソフトウェア ベースの avifenc と比較して、Pulsar-AVIF は同様の圧縮効率で 7 ～ 23 倍の速度向上を実現します。
- テストセット: コダック（768x512 の 24 枚の画像）
- 24 画像を同時にエンコード（24 プロセス）
- 各ソフトウェア エンコード プロセスは 4 つのスレッドで実行されます。（-j 4）
デベロッパーは、Azure NP-Series などのクラウド仮想マシンに Pulsar-AVIF エンコーダをデプロイできます。
レスポンシブ ウェブページ向けの AVIF 機能
AVIF には、ウェブページの応答性の向上に役立つ興味深い機能がいくつかあります。今回は、アニメーション AVIF について詳しく説明します。アニメーション AVIF は、ウェブ上で魅力的なアニメーションを配信するための圧倒的に効率的な方法です。
アニメーション AVIF
アニメーション GIF は、35 年前であるにもかかわらず、今でもアニメーション画像の一般的な形式です。アニメーション GIF の最大の欠点は、256 色のみをサポートしており、圧縮率が低いため、ファイルサイズが非常に大きくなるだけでなく、実際のユースケースの解像度やフレームレートも制限されることです。一方、アニメーション AVIF コーディングは、実際に AV1 ビデオ コーディング スキームと同じであるため、アニメーション GIF に比べてファイル サイズを大幅に節約できます。
シンプルなベンチマークを実行して、一連のアニメーション GIF を AVIF と JPEG XL の両方にエンコードしました。テストセットでは、ファイルサイズ削減率の中央値は、元の GIF ファイルと比較して約 86%、アニメーション JPEG XL ファイルと比較すると約 73% でした*。
Chrome、Firefox、Safari はすべて、アニメーション AVIF 再生をサポートしています。
FFmpeg は、アニメーション AVIF ファイルを作成するためのツールの一つです。FFmpeg を使用して GIF を AVIF に変換する基本的な例を次に示します。
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF は、目的の出力品質を 0～63 のスケールで表したものです。値が小さいほど、品質が高くファイルサイズが大きくなります。0 は可逆圧縮を使用します。小さいアニメーション AVIF ファイルの場合は、23 の値から開始します。
FFmpeg は、AVIF 画像のエンコードにデフォルトで libaom を使用しますが、可能であれば rav1e または SVT-AV1 を使用することもできます。エンコーダの選択や、速度と品質のトレードオフに合わせてエンコード パラメータを調整する方法について詳しくは、FFmpeg の AV1 エンコード ガイドをご覧ください。
もう 1 つのユースケースは、元のファイルを再エンコードせずに AV1 動画を AVIF に再パッケージ化することです。この方法は、元の AV1 ファイルのデコード/エンコードよりも大幅に安価で、AV1 動画を <img> 要素で使用できるようになります。そのためには、-c:v copy を FFmpeg に渡します。
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
まとめ
ウェブでの AVIF の使用はリリース以来着実に増加しており、ブラウザ、画像 CDN、WordPress プラグイン、エンコード ツールで幅広くサポートされています。総合的に見て、AVIF はウェブで画像を提供するのに最適な選択肢です。AVIF は、サイトに合わせて最適な画質または最小ファイルサイズを提供しながら、高速でエンコードおよびデコードします。AVIF は、ウェブ上でアニメーションを配信する最も効率的な方法です。ご質問、ご意見、機能リクエストがございましたら、av1-discuss メーリング リスト、AOM GitHub コミュニティ、AVIF Wiki からお問い合わせください。