AVIFは画像を大まかに圧縮します WebP より 20% 小さい 同じ品質で、WebP は数倍高速にエンコードし、より多くの場所で動作します。どちらもビデオコーデックから派生した次世代形式です。WebP は 2010 年の VP8 から、AVIF は 2019 年の新しい AV1 からです。AVIF は、HDR と 12 ビットカラーをサポートする強力なコンプレッサーです。 WebP は実用的なデフォルトであり、より広範なソフトウェアサポートとより迅速なエンコードを備えています。この比較では、各形式がどこから来たのか、圧縮、エンコード速度、色深度、ブラウザのサポート、透明度、アニメーション、および特定の用途でどの形式が優れているかを取り上げます。

どちらも完全に勝つわけではありません。 AVIF は最小のファイルと最大の色を生成します。現在、WebP はより迅速に作成でき、より安全に提供できます。多くのサイトでは両方を提供しており、最初に AVIF、2 番目に WebP が表示され、最後に JPG または PNG フォールバックが表示されるため、どのブラウザでも読み取り可能な最適な形式が得られます。

各形式の由来

どちらの形式もビデオ圧縮から抽出された静止画です。 WebP のコーディングは以下から取得します。 VP8、2010 年の Google ビデオコーデックであるため、現在では 10 年以上前のものであり、徹底的にサポートされています。 AVIF のコーディングは以下から取得されます。 AV1は、Google、Netflix、Apple がメンバーとなっている Alliance for Open Media による 2019 年のロイヤリティフリーのコーデックです。 AV1 は VP8 よりも 1 世代先の世代であるため、AVIF はより強力に圧縮しますが、より多くの計算能力も必要とします。

圧縮: AVIF の勝利

AV1 の方が新しくて賢いため、圧縮は AVIF に有利です。同じ写真を同等の品質で撮影すると、AVIF は約 WebP より 20% 小さい、JPGよりもはるかに小さいです。 AVIF はフラットカラーとグラデーションもきれいに処理し、弱いフォーマットで表示されるバンディングを回避します。可能な限り小さいファイルの場合は AVIF が勝者であり、滑らかな領域が大きい画像では差が大きくなります。

画像が多いサイトでは節約が難しくなります。 WebP がすでに画像を JPG の下 3 分の 1 にカットしている場合、AVIF は上からさらに 5 分の 1 をトリミングするため、元の JPG に対する合計の削減量は半分に近づく可能性があります。 Core Web Vitals で測定されたページの場合、これは速度の大幅な向上です。

エンコード速度: WebP の勝利

エンコーディングは、AVIF が圧縮の費用を支払う場所です。 AV1 は計算量が多いため、 AVIF エンコードは WebP より数倍遅い。これは、サイトが何千もの画像を処理したり、それらをオンザフライで生成したり、限られたサーバーリソースで実行したりする場合に重要です。 WebP エンコードは、リアルタイムで使用できるほど高速にエンコードされます。これが、WebP がデフォルトになった理由の 1 つです。ブラウザが画像を表示するために行うデコードはどちらも高速であるため、訪問者はどちらの場合でも速度の低下を感じることはありません。

色深度と HDR: AVIF の勝利

色の濃さによって 2 つが明確に区別されます。 AVIF サポート チャンネルあたり最大 12 ビットおよび HDR、そのため、WebP では不可能な広色域および高ダイナミックレンジの画像を保持します。 WebP の上限は JPG と同じように、チャネルあたり 8 ビットです。写真、最新の広色域ディスプレイ、HDR コンテンツの場合、AVIF が唯一の選択肢です。標準の 8 ビット画面では違いは目に見えませんが、対応するハードウェアでは AVIF は WebP が単純に保存できない色を表示します。

透明性とアニメーション

どちらの形式も透明性とアニメーションをカバーしているため、ここではどちらも勝ちません。それぞれが運ぶ フルアルファチャンネルなので、透明なロゴはどちらでも透けて見え、どちらも GIF よりもはるかに小さいアニメーションクリップをサポートしています。 AVIF のアニメーションは AV1 のおかげでより厳密に圧縮されますが、WebP のアニメーションはより迅速に生成されます。シンプルなアニメーショングラフィックの場合、どちらかが GIF に決定的に勝ります。

ブラウザとソフトウェアのサポート: WebP が勝利

WebP の利点はサポートです。最新のブラウザはすべて、何年にもわたって WebP を読み取り、ソフトウェア、プラグイン、CDN の深い井戸が WebP を処理します。 AVIF サポートがブラウザーで幅広くサポートされるようになりましたには、Chrome、Firefox、Safari が含まれますが、WebP に遅れをとっており、デスクトップエディター、古いシステム、および一部の CDN はさらに遅れています。現在、混合ソフトウェア間でファイルを確実に開く必要がある場合は、WebP を使用する方が安全です。

実際のファイルサイズ

実数は取引を具体的にします。 JPG として 400 KB の写真は、同じ品質で WebP として 280 KB 近く、AVIF として約 220 KB に達する可能性があります。 PNG として 120 KB の透明なグラフィックは、WebP として 80 KB、AVIF として 60 KB になる可能性があります。正確な数値は画像によって異なりますが、AVIF が最小、WebP が中間、レガシー形式が最大という順序が保たれます。追加の 20 パーセントが、AVIF の遅いエンコードと狭いサポートに見合う価値があるかどうかに基づいて選択してください。

デコード速度と訪問者の感じ方

訪問者が経験するのはエンコードではなくデコードであり、ここでは 2 つの形式は近いものです。ブラウザが画像を表示するときは、それをデコードする必要があり、AVIF と WebP の両方をデコードする必要があります。 スムーズなページ読み込みに十分な速度でデコードする。 AVIF の大量の AV1 計算はエンコード側で行われ、画像がロードされるたびではなく、画像の作成時に 1 回実行されます。したがって、訪問者は AVIF のエンコードコストを支払うことはありません。ダウンロードサイズが小さいことからのみメリットが得られます。

この分割は、各フォーマットをどのように展開するかにとって重要です。ビルドステップまたは CDN で事前に AVIF をエンコードし、結果をキャッシュします。リクエストごとにエンコードしないでください。エンコードすると、訪問者の利益が得られずにサーバーに負担がかかることになります。 WebP はオンザフライでエンコードするのに十分寛容ですが、AVIF は事前生成に重点を置いています。

HTML でのフォールバックの構築

両方の形式を安全に提供するには、ピクチャー要素を使用します。これにより、ブラウザーは理解できる最適なソースを選択できるようになります。最初に AVIF、2 番目に WebP、最後に JPG または PNG をリストします。ブラウザはリストを読み取って、 デコードできる最初のフォーマット、残りは無視します。最新のブラウザは AVIF を使用し、古いブラウザは WebP を使用し、古いブラウザは JPG を使用します。壊れた画像を見る訪問者は一人もおらず、各訪問者はソフトウェアが許可する最小のファイルを取得します。

ほとんどのコンテンツ管理システムと画像 CDN はこのマークアップを構築するため、1 つのファイルをアップロードすると、システムが形式とフォールバックチェーンを生成します。小規模なサイトでは手動で行うのが問題ありませんが、自動化した方が数百の画像にわたってより適切に拡張できます。

写真と HDR 用の AVIF

AVIF の色の利点は写真において最も重要です。それ 12ビットカラーとHDRのサポート 最新のカメラの幅広い階調範囲と HDR ディスプレイの鮮やかな出力を保持しますが、どちらも WebP では保存できません。明るい空と深い影のある風景は、AVIF の両方でより詳細に保持されます。広色域の画面では、WebP がクリップする飽和した赤と緑はそのまま残ります。

標準画面上の日常的な Web グラフィックでは、8 ビットディスプレイでは余分な範囲を表示できないため、この利点は目に見えません。しかし、写真サイト、HDR コンテンツ、ハイエンドディスプレイの場合、画像を正しく処理できるのは 2 つのうち AVIF だけです。

AVIF のサーバーとツールのコスト

AVIF の圧縮は作成時点では無料ではありません。エンコードが遅いということは、 CPU コストが高く、ビルド時間が長くなるサイトで何千もの画像が生成されると、この額が加算されます。古い画像ライブラリや一部のエディタでも AVIF をまだ作成できないため、ツールが AVIF をサポートしている必要があります。対照的に、WebP はほぼすべての画像ライブラリで処理され、高速にエンコードされるため、現時点では摩擦の少ない選択肢となっています。

実際的なポイントは、追加の 20% のサイズ削減と、エンコードのコストとツールのギャップを比較検討することです。すべてのバイトを最適化する大規模なメディア操作では、AVIF がその役割を果たします。小規模なサイトの場合、WebP は何の問題もなく、ほとんどのメリットをもたらします。

どのフォーマットが勝つのか

すべての仕事でどちらが勝つわけではありません。選択してください 最小ファイル、HDR、ワイドカラー用の AVIF ツールがそれをサポートしており、エンコード時間がボトルネックにならない場合。選択してください WebP による高速エンコード、幅広いサポート、安全なデフォルト 現在、より多くのソフトウェアで機能します。最も強力な設定では、最初に AVIF、2 番目に WebP、そして最後に JPG または PNG フォールバックの両方が機能するため、各訪問者はブラウザがデコードできる最適な形式を受け取ります。

これらのフォーマットの作成方法

最新のフォーマットを作成するには、WebP 用の重いツールは必要ありません。私たちの PNG から WebP へのコンバーターブラウザで実行され、ファイルをバッチ処理し、ウォーターマークは追加されません。 AVIF エンコードは要求がより厳しいため、通常はクイックブラウザツールではなく、画像 CDN またはビルドステップによって処理されます。ほとんどのサイトでは、今すぐ WebP を生成し、後で CDN 経由で AVIF を追加するのが現実的な方法です。

よくある質問

AVIF はウェブサイトの読み込み時に速度を低下させますか?

いいえ。 AVIF は高速にデコードします。エンコードだけが遅いエンコードは、ページの読み込みごとではなく、画像の作成時に 1 回行われます。訪問者は小さいダウンロードのみを取得します。

WebP フォールバックで AVIF を提供するにはどうすればよいですか?

絵要素を使用します。 最初に AVIF、2 番目に WebP、最後に JPG または PNG をリストします。と、ブラウザはデコードできる最初の形式を読み込みます。

AVIF は小規模な Web サイトにとって価値がありますか?

多くの場合、まだです。 WebP は、少ない手間でほとんどの節約を実現します、AVIF の遅いエンコードとツールのギャップにより、小規模なサイトではほとんど必要としないコストが追加されるためです。

AVIF は WebP よりも優れていますか?

圧縮に関しては、そうです。 AVIF は約 20% 小さい そしてHDRをサポートします。 WebP はエンコードが速く、サポート範囲も広いため、現在はより安全なデフォルトとなっています。

AVIF は WebP よりどれくらい小さいですか?

その周り 20% 小型化 AVIF は新しい AV1 コーデックを使用するため、同じ品質で JPG よりもはるかに小さいです。

AVIF の作成が遅いのはなぜですか?

なぜなら AV1 エンコードは計算量が多い。 AVIF は、エンコード速度と引き換えに圧縮率を向上させます。これは、画像を大量に処理する場合や限られたサーバーで処理する場合に重要になります。

WebP は HDR をサポートしていますか?

いいえ。 WebP の上限はチャネルあたり 8 ビットです、そのため、HDR または広色域の色を保存できません。 AVIF は最大 12 ビットと HDR をサポートします。

AVIF をサポートしているブラウザはどれですか?

Chrome、Firefox、Safari は AVIF をサポートしますただし、採用は WebP に遅れをとっており、一部の CDN やエディターは遅れています。古いクライアントには WebP または JPG フォールバックを提供します。

AVIF と WebP は両方とも透明性を保っていますか?

はい。 どちらも完全なアルファチャンネルを搭載しています, そのため、JPG とは異なり、透明なグラフィックはどちらの形式でもシースルーのままです。

アニメーションには AVIF と WebP のどちらが適していますか?

どちらもGIFを上回っています。 AVIF はより強力に圧縮します。 AVIF アニメーションは小さく、WebP は作成が速いしたがって、サイズとエンコード速度のどちらが重要かによって選択してください。

自分のサイトには AVIF と WebP を使用する必要がありますか?

両方を提供します。 最小のファイルは最初に AVIF、2 番目に WebP 互換性のため、残りは JPG または PNG の代替となります。

AVIF は WebP を置き換えますか?

すぐではありません。 AVIF はより優れた圧縮率を誇りますが、WebP はより高速にエンコードし、より幅広いサポートを備えています。したがって、両方が何年も共存し、一緒に提供される可能性があります。

古いブラウザでも AVIF を開くことができますか?

多くの場合、そうではありません。 AVIF のサポートは WebP よりも古いそのため、古いソフトウェアを使用している訪問者にとっては、JPG または PNG のフォールバックが不可欠です。

AVIF と WebP はどちらもビデオコーデックから構築された次世代フォーマットですが、AVIF は圧縮率が約 20% 小さく、HDR と 12 ビットカラーが追加されているのに対し、WebP はエンコードが高速で、より幅広いサポートを受けています。どちらも透明性とアニメーションを維持するため、選択は、最小のファイルが必要か、最も安全で迅速なファイルが必要かによって決まります。最初にサイズのために AVIF を提供し、次に互換性のために WebP を提供し、残りのために JPG または PNG のフォールバックを提供します。上記のコンバータを使用してブラウザで WebP を作成し、画像パイプラインを通じて AVIF を追加します。

クイックリファレンス: AVIF または WebP

手を伸ばす AVIF 絶対的に最小のファイルが必要な場合、画像に HDR またはワイドカラーが必要な場合、CDN またはビルドステップですべてのリクエストを遅らせることなく事前エンコードできる場合。手を伸ばす WebP 高速なエンコード、最も広範なソフトウェアのサポート、ほぼすべてのツールがすでに対応している低摩擦のデフォルトが必要な場合。最も強力な設定は、どちらか一方ではなく両方を順番に提供することです。最初にサイズの AVIF、2 番目にリーチの WebP、そして最後に JPG または PNG のフォールバックを使用するため、訪問者に壊れた画像が残ることはありません。

AVIFの次に来るもの

画像フォーマットは進化を続けており、ロスレス JPG トランスコーディングによる強力な圧縮が期待できる JPEG XL が次の候補です。現在、ブラウザのサポートは限られているため、まだ実用的な選択肢ではありません。現時点では、AVIF と WebP が導入する価値のある 2 つの次世代フォーマットであり、JPEG XL は注目に値します。フォールバックチェーンを構築すると、古いブラウザを壊すことなく、後で新しい形式を追加できることを意味します。そのため、絵素のアプローチは将来性があります。