エコシステムで AVIF がどのように採用されているかに関する最新情報。
AVIF は、圧縮率の高さ、効率的なパフォーマンス、幅広い採用により、ウェブで急速に普及している新しい画像形式です。AVIF は、Alliance for Open Media によって標準化された AV1 動画コーデックに基づく、オープンでロイヤリティフリーの画像形式です。このブログ投稿では、AVIF がエコシステムにどのように採用されているかの概要と、静止画像やアニメーションで AVIF から期待できるパフォーマンスと品質のメリットについて説明します。
AVIF エコシステムの新機能
Chrome、Firefox、Safari で AVIF が導入されて以来、ウェブでの AVIF の使用は着実に増加しており、現在ではほぼすべてのブラウザが AVIF をサポートしています。
Chrome だけでも、Chrome が安定版で 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 は、一般的なユースケースで同様のパフォーマンスを達成しながら、圧縮率を大幅に向上させます。
エンコード速度と視覚品質のより詳細な比較に関心があるデベロッパー向けに、画像コーディングの比較サイトに再現可能なベンチマーク結果が掲載されています。
AVIF や WebP などの最新の画像コーデックのソフトウェア実装は、x86 および ARM プロセッサ アーキテクチャ向けに最適化されていますが、大量の画像を大規模に圧縮すると、計算コストが高くなる可能性があります。圧縮コストを削減するもう一つの方法は、ハードウェア アクセラレーションを検討することです。Bluedot は、AMD の Alveo U250 などのプログラマブル FPGA で動作する、ハードウェア アクセラレーション対応の Pulsar-AVIF エンコーダを開発しました。ソフトウェア ベースの avifenc と比較して、Pulsar-AVIF は同様の圧縮効率で 7 ～ 23 倍の速度向上を実現します。
- テストセット: 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% でした*。
Chrome、Firefox、Safari はすべて、アニメーション AVIF の再生をサポートしています。
アニメーション AVIF ファイルの作成に使用するツールの 1 つが FFmpeg です。FFmpeg を使用して GIF を AVIF に変換する基本的な例を次に示します。
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF は、0～63 のスケールで指定する、目的の出力品質です。値が小さいほど、品質が向上し、ファイルサイズが大きくなります。0 では可逆圧縮が使用されます。小さなアニメーション AVIF ファイルの場合は、23 の値から始めます。
FFmpeg は、デフォルトで libaom を使用して AVIF 画像をエンコードしますが、利用可能な場合は 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 までお問い合わせください。