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 は一般的なユースケースで同様のパフォーマンスを実現しながら、大幅な圧縮率の向上を実現します。
より詳細なエンコード速度と画質の比較については、Image Coding Comparisons のサイトで再現可能なベンチマーク結果をご覧ください。
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 の再生をサポートしています。
FFmpeg は、アニメーション AVIF ファイルの作成に使用できるツールの 1 つです。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 エンコード ガイドをご覧ください。
別のユースケースとしては、元のファイルを再エンコードせずに、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 ウィキからお問い合わせください。