コンテンツにスキップ 
avif 対 webp ページの読み込み速度や、写真やグラフィックの鮮明さを決定します。AVIF が圧縮で優位に立つ点、WebP が高速デコードで優位に立つ点、そして両者を賢く組み合わせる方法をご紹介します。.
中心点
誰が 画像を賢く配信することで、時間、トラフィック、CPUサイクルを節約できます。詳細に入る前に、主な違いを簡単にまとめます。ホスティングの日常業務で AVIF と WebP を一緒に使用する方法について、明確な推奨事項をご紹介します。これにより、品質を損なうことなく、短い読み込み時間を実現できます。. ゴール 残るのは、高速、互換性、メンテナンスの手間が少ないことです。.
- 圧縮：AVIF は、同じ品質で WebP よりも 20～50% 小さなファイルサイズを実現します。.
- スピード: WebP はブラウザでのデコードが高速で、ユーザー側の CPU への負担を軽減します。.
- 品質：AVIF は写真、グラデーション、細かいディテールに優れています。WebP は透明感のあるグラフィックに適しています。.
- サポート: WebP は、ほぼすべての最新のブラウザで確実に動作します。AVIF も急速に普及が進んでいます。.
- 練習: ハイブリッドセットアップ
：まず AVIF、次に WebP をフォールバックとして使用。.
リスト 導入段階でのみ役立ちます。実践では、動機、目標デバイス、および測定基準によって決定されます。実験を行わなくても信頼性の高い結果を得られるよう、具体的な設定方法をご紹介します。.
WebP と AVIF の概要
ウェブピー VP8コーデックに基づいており、ブラウザ、CMS、ツールで広く確立されています。AVIFはAV1に基づいており、画像内の冗長性をより正確に除去する高度な手法を採用しています。これにより、同じ視覚的印象を維持しながらファイルサイズを大幅に削減でき、読み込み時間に直接的な効果があります。WebPは、デコードに必要とするCPUリソースが少ないため、日常的に非常に高速に感じられます。 そのため、さまざまなモチーフが混在するプロジェクトでは、両方の長所を組み合わせ、リスクを最小限に抑える組み合わせを採用しています。.
ホスティングでの圧縮とファイルサイズ
アービフ JPEG と比べると平均で約 50% 節約でき、WebP は約 30% の削減になります。直接比較すると、AVIF ファイルは WebP より 20～50% ほど小さくて、一般的な画像では見た目に差はありません。これにより、LCP に関連するバイト数が減って、帯域幅が限られているモバイルユーザーに負担がかかりにくくなります。 多くの写真を含むポートフォリオやショップでは、この利点はカテゴリページ全体で大幅に拡大します。より深い理解のために、ベースラインを WebP 対 JPEG の比較 そして、その上にAVIFを置きます。.
ロード時間、デコード、CPU
ウェブピー デコーダーがより成熟し、軽量化されているため、多くのシナリオでレンダリングが著しく高速化されています。AVIF はより多くの計算時間を必要としますが、多くの場合、ペイロードが小さいためそれを相殺しています。高速のデバイスではその差はほとんど目立ちませんが、非常に古いスマートフォンでは AVIF 画像の計算にやや時間がかかります。 そのため、時間的余裕が限られている重要なアバブ・ザ・フォールドのモチーフには、WebP フォールバックを使用することを好みます。モチーフが大きかったり、ディテールが豊富な場合は、転送量が少ない AVIF の方が有利であり、最終的にはより高速なスタートレンダリングを実現します。.
被写体タイプ別の画質
写真 AVIF では、細かいテクスチャ、影、滑らかなグラデーションが、より滑らかでアーティファクトが少ないように見えることが多い。WebP もそれに劣らず安定しているが、低ビットレートではバンディングやエッジのちらつきが見られやすい。 ロゴ、アイコン、UI 要素については、WebP は透明度が明確でファイルサイズが非常に小さいため、優れた性能を発揮します。アニメーションは、データ量と CPU 負荷が大幅に削減されるため、GIF の代わりに WebP で置き換えることをお勧めします。ハイダイナミックレンジまたは 10 ビットのシーンでは、AVIF がその強みを発揮し、トーン値をより良く保持します。.
互換性とフォールバック戦略
ウェブピー ほぼすべての最新ブラウザでサポートされています。Safari 14 以降も含まれます。AVIF は現在、Chrome、Firefox、Edge、および新しいバージョンの Safari でサポートされていますが、古いデバイスではまだ不確定要素が残っています。 そのため、私は AVIF を優先し、WebP をフォールバックオプションとして提供し、必要に応じて JPEG を最後の手段として選択しています。これにより、クライアントはユーザーが介入することなく、自動的に最適なフォーマットを表示します。この段階的な対応により、配信の信頼性が確保され、サポートケースが大幅に削減されます。.
picture要素を使用した実践的な設定
写真 複数のソースを指定し、ブラウザに決定を任せることができます。AVIF を最優先とし、WebP を 2 番目のソースとして設定し、img タグにフォールバック用の標準フォーマットを設定します。 loading=“lazy“ を使用することで、レイアウトの乱れを心配することなく、下にあるモチーフの計算時間を節約できます。さらに、srcset および sizes を使用して幅を定義し、デバイスが適切なバリエーションのみをロードするようにしています。これにより、HTML で直接転送とレンダリングを制御し、メンテナンスを管理しやすい状態に保つことができます。.
パイプライン、CMS、CDN
オートメーション 私の作業負担を軽減：ビルドパイプラインは、マスター画像から AVIF、WebP、JPEG のバリエーションを生成します。CMS ワークフローでは、アップロードするだけで、残りはプラグインやワーカージョブによって実行されます。CDN は配信を高速化し、オンザフライでバリエーションを生成またはキャッシュすることができます。WordPress では、Transformations Edge との統合、たとえば Bunny.net によるイメージ CDN. これにより、ユーザーは常にエッジ PoP の近くに接続され、最適な画質で映像を視聴することができます。.
エンコーディング設定：品質を目的指向で制御
品質パラメータ モチーフによってその効果は大きく異なります。固定値をグローバルに設定する代わりに、モチーフタイプごとにガイドラインを設定し、ランダムにテストを行っています。.
- AVIF (libaom/SVT-AV1)：写真の場合は、10ビット、4:2:0クロマ、適度な速度で始めます。目標範囲は cqレベル/品質：24～34。低いほど良いが、速度は遅くなる。UI グラフィックの場合、4:4:4 を使用すると色のエッジが鮮明になり、必要に応じて品質を少し高く（20～28）設定すると良い。.
- WebP（非可逆）：安定した出発点は q=70–82 で、 -m 6 （集中的な検索）および -af （自動フィルター）。繊細なプロセスには q=85、輪郭が重要でないサムネイルには q=60～70 を設定してください。.
- WebP（ロスレス/ニアロスレス）: アイコン/ロゴについては、以下を提供します。 ほぼロスレス 同じ画質で、PNGよりも20～40%少ないバイト数になることが多い。60～80から始めて、エッジを確認しよう。.
CLI の例 再現性のあるビルドのために：
# AVIF: 10ビット、品質と速度のバランスに優れる avifenc --min 0 --max 63 --cq-level 28 --speed 4 --depth 10 --chroma 420 input.jpg -o output.avif
# WebP：写真（非可逆） cwebp -q 78 -m 6 -af -sharp_yuv input.jpg -o output.webp # WebP：UI/ロゴ（ほぼ可逆） cwebp -near_lossless 70 -z 6 input.png -o output.webp
ヒント：フィルムグレインの強いモチーフは、AVIF のグレインオプションを使用することで、コーデックを「滑らかにする」よりも、よりリアルな表現が可能になります。テクスチャ（肌、布、葉）については、品質レベルを 1～2 段階上げ、その代わりに解像度を少し下げることをお勧めします。視覚的には、意図的なスケーリングの方が良い結果になる場合がほとんどです。.
レスポンシブ画像の適切なサイズ設定
決議 最大のレバレッジです。テンプレートごとに上限（ヒーロー、コンテンツ、サムネイル）を設定し、デバイスカテゴリを ソースセット そして サイズ. そのため、小型デバイスは 2K アセットをロードすることはありません。.
<picture>
<source type="image/avif"
srcset="hero-800.avif 800w, hero-1200.avif 1200w, hero-1600.avif 1600w"
sizes="(max-width: 900px) 92vw, 1200px">
<source type="image/webp"
srcset="hero-800.webp 800w, hero-1200.webp 1200w, hero-1600.webp 1600w"
sizes="(max-width: 900px) 92vw, 1200px">
<img src="hero-1200.jpg" width="1200" height="800" alt="ヒーローのモチーフ"
loading="lazy" decoding="async">
</picture>
- 幅の段階: 10段階ではなく、1.0x/1.5x/2.0xで十分な場合が多く、バリエーションが多すぎるとビルドとキャッシュの負荷が高まります。.
- 寸法を固定する: width/height または CSS aspect-ratio は CLS を回避します。これはプレースホルダー/ぼかしプレースホルダーにも当てはまります。.
- ダウンスケーリング圧縮前に適度に縮小してください（例えば、目標幅の 1.5～2.0 倍を超えないようにしてください）。デコーダーは常に全ピクセル数をバッファリングする必要があります。.
優先順位付け、遅延読み込み、プリロード
Above-the-fold 画像は他の要素の表示を遅らせてはいけません。私は優先度ヒントを使用し、2番目のフォールドからレイジーローディングを設定し、重要なプリロードは控えめに使用しています。.
- フェッチプライオリティ: ヒーロー画像を入手する fetchpriority="high"; それ以外は「auto」または「low」のままにしておいてください。.
- レイジーローディング: loading="lazy" ドキュメントの奥深くにあるコンテンツ画像用。ギャラリーの場合、IntersectionObserver はビューポートの直前にクリーンなプリロードをトリガーできます。.
- プリロード：1～2個の重要なAbove-the-foldモチーフのみに使用してください。それ以外に使用すると、優先順位キューが薄まってしまいます。プリロードは、実際に使用されている ソース/タイプ 一致する。.
カラーマネジメント、HDR、メタデータ
色再現性 は品質の特徴です。AVIF は高いビット深度と最新の転送機能をサポートしています。WebP は、実用上、ほとんどの場合 8 ビット sRGB で動作します。.
- ビット深度：10ビットAVIFは、カラーグラデーションのバンディングを大幅に低減します。従来のウェブ写真では8ビットで十分な場合が多いですが、グラデーションがある場合は10ビットが有効です。.
- 色空間: 一貫した表示のために sRGB を埋め込みます。広い色域 (Display P3) も可能ですが、対応するディスプレイでのみその利点を発揮します。.
- HDR：AVIF は PQ/HLG および高コントラストシーンをより適切に伝送します。ターゲットブラウザでレンダリングパスを確認し、HDR を SDR ページに無制限に混在させないでください。.
- メタデータ：エクスポート後に方位/EXIFを確認してください。すべてのパイプラインがGPS/EXIFを保持するわけではありません。プライバシー保護の観点から、それが望ましい場合が多いのです。.
透明性、アイコン、UIグラフィック
透明性 アルファエッジが半透明になると、扱いが難しくなる。だから、UIグラフィックをいろんな背景（明るい/暗い/コントラストが強い）でテストしてるんだ。.
- ウェブピー 信頼性の高いアルファサポートと、ほぼロスレスの小さなファイルサイズが魅力。シャープなロゴには、よく最初に選ばれるよ。.
- アービフ 透明性は確保できますが、ツールチェーンはより一貫性に欠ける動作をします。CIに重要なロゴについては、WebP/PNGを保守的に使用し続けることにします。.
- エスブイジー 実際のベクター（ロゴ、アイコン、シンプルなイラスト）には、これが最善の選択肢です。ラスター形式は、ここでは次善の選択肢です。.
- スプライト ほとんど必要ないよ。HTTP/2/3 とキャッシュのおかげで、ほとんどの場合、それらは不要になるんだ。個別で、名前もわかりやすい、キャッシュの長いアセットを使うのがいいね。.
サーバー構成、キャッシュ、セキュリティ
ヘッダー キャッシュヒット、CPU負荷、正確なタイプ認識を決定します。正しいMIMEタイプ、長いキャッシュ時間、専用のファイル名を設定します。.
- コンテンツタイプ: image/avif、image/webp、image/jpeg を正しく配信してください。汎用的な application/octet-stream.
- キャッシング: キャッシュ制御: public, max-age=31536000, immutable バージョン管理されたファイル名（名前にハッシュを含む）の場合。これにより、ブラウザは極めて効率的であり続けます。.
- 可変: サーバー側での Accept ヘッダーによるネゴシエーションでは、 値: Accept 義務。利用していますか？ 写真-マークアップは、ほとんどの場合必要ありません。.
- ノスニフ: X-Content-Type-Options: nosniff 誤解を防ぎます。セキュリティスキャンと一貫した動作に役立ちます。.
- ETag/Last-Modified: 大量の画像がある場合は、コンテンツハッシュよりも強力な ETag を使用することをお勧めします。再検証時の帯域幅を節約できます。.
CDN戦略: 幅/フォーマットごとのバリエーションを個別の URL としてキャッシュする。オンザフライのトランスコーディングはコストがかかる場合があるため、事前に構築するか、積極的にキャッシュすることをお勧めします。.
特別なケースと移行パス
サムネイル/ギャラリー: グリッドの軽快さを実現するために、多くの小さな WebP アセットを優先し、詳細表示では AVIF を使用しています。これにより、古いデバイスでも高速に動作し、ズーム時にもバイト数を節約できます。.
ズーム付き製品画像: 最大サイズを定義する（例：2000～2600 px）。それ以上になると、デコード負荷が増加するだけです。ズームビューアの場合：プログレッシブ LOD アプローチ（小さいサイズをロードし、インタラクション時に大きいサイズをリロード）。.
ソーシャルプレビュー/OG: Open Graph/Share-Images には、クローラー/Web ビューが AVIF/WebP を一部無視する場合があるため、安全な形式 (JPEG/PNG) を提供してください。これは、オンサイト配信とは別です。.
電子メールニュースレタークライアントはAVIFをサポートするケースが少ないです。ここではJPEG/PNGを保守的に計画し、ウェブでは次世代フォーマットを採用しましょう。.
アニメーション: WebP アニメーションは広く普及しており、GIF に取って代わる高性能なものです。AVIF アニメーションは効率的ですが、サポートは統一されていません。目的を明確にしてご利用ください。.
権利およびライセンス: 両方のフォーマットはライセンスフリーです。エンタープライズ環境では、一部のオーディオ/ビデオコーデックのように特許リスクがないため、安心できます。.
トラブルシューティングと品質保証
工芸品 品質目標が厳しすぎる場合や、スケーリングが間違っている場合に発生することがよくあります。100% および 200% Zoom でエッジ、肌、空を確認します。.
- バンディング：グラデーションに段差が見られる？AVIF を 10 ビットでエンコードするか、品質を少し高く設定してください。オプションで、マスター画像にディザリングを適用してください。.
- ハロー：シャープすぎるマスター画像は、損失を伴う圧縮と衝突します。シャープネスを下げ、その後再エンコードしてください。.
- モアレ/エッジのちらつき: 細かいパターンでは、より高品質または最小限の異なるスケーリングをテストしてください（例：100% ではなく 98%）。.
- アルファフリンジ：明るい/暗い背景で確認し、必要に応じてロスレス/ニアロスレスに切り替えてください。.
自動チェック パイプラインで役立つもの：SSIM/MS‑SSIM または VMAF を許容値のある目標指標として使用することで、すべての画像を個別に評価する必要がなくなります。さらに、ロールアウト前に 10～20 枚の代表的なモチーフを手作業でレビューします。.
主要指標のテストと監視
指標 LCP、INP、TTFB は、画像戦略が効果的かどうかを示す指標です。私はまずラボ（Lighthouse）でモチーフを検証し、次にフィールド（RUM）で実際のデバイスやネットワークを検証します。ホームページやカテゴリテンプレートについては、AVIF ファーストと WebP ファーストの A/B 比較を行う価値があります。 さらに、誤った寸法は知覚を損なうため、累積レイアウトシフトも監視しています。このガイドは、実践的な入門書として役立ちます。 ウェブ用に画像を最適化.
コストと気候への影響
トラフィック お金とエネルギーがかかるから、節約できたメガバイトは予算とCO₂排出量に直接影響するんだ。AVIFが画像シリーズのバイト数を3分の1から半分に減らせば、CDNとオリジンコストが大幅に削減されるよ。 同時に、読み込み時間が短縮されることで直帰率が低下し、コンバージョン率が向上するため、ROI が向上します。サーバー側では、AVIF 生成時の CPU 負荷は 1 回限りですが、WebP フォールバックは広範囲をカバーします。この相乗効果により、コスト、速度、環境への影響のバランスが取れた結果が得られます。.
比較表：機能とサポート
概要 意思決定、特にチームが異なる目標を追求している場合に役立ちます。この表は、実用的な違いをまとめたもので、画像が多いサイト、ショップ、雑誌を対象としています。サイズ、速度、品質、到達範囲を重み付けして、推測する必要がないようにしています。値は実用的なものであり、一般的な設定に基づいています。特別なケースでは、グローバルなルールを定める前に、必ず独自のサンプルをチェックしてください。.
| 特徴 | アービフ | ウェブピー |
|---|---|---|
| ファイルサイズとJPEG | 約 50% 小 | 約 30% 小 |
| ファイルサイズとWebP | 20–50% 同じ品質でより小型 | - |
| デコード速度 | 遅くなるが、多くの場合、小さなファイルによって補われる | より高速、CPUを節約 |
| 写真の品質 | 非常に良い、力強い流れ/ディテール | ええ、低ビットレートではアーティファクトが発生しやすいです。 |
| 透明性 | ツールチェーンに応じて利用可能 | UIやロゴに最適 |
| アニメーション | 可能、サポートは不均一 | 確立、GIFの代替 |
| ブラウザのサポート | 幅広、古いデバイスはサポート対象外の場合あり | 非常に幅広い、サファリを含む 14 歳以上 |
| 使用に関する推奨事項 | 写真、大きなモチーフ、品質 | UIグラフィック、フォールバック、アニメーション |
プロジェクト目標に基づく意思決定マトリックス
目標像 選択を左右する要素：写真ギャラリーでバイト数を最小限に抑えることが最優先なら、AVIF が有利です。古いデバイスでファーストペイントが最優先なら、WebP を目立つ場所に使用すると効果的です。 商品画像が多いショップでは、詳細表示には AVIF を、ギャラリーサムネイルには WebP を使用しています。雑誌では、ヒーロー写真やストーリー画像に AVIF を使用すると効果的ですが、UI 要素や装飾グラフィックには WebP で十分です。このセグメンテーションにより、メンテナンスの負担が軽減され、信頼性の高いスコアが確保されます。.
実践のための簡単なまとめ
結果：私は、写真が主流で、大量処理においてバイト数が重要な場合に AVIF を使用し、互換性があり高速なフォールバックレベルとして WebP を残しています。このハイブリッドアプローチは、AVIF の小さなペイロードと WebP の幅広いサポートを組み合わせています。ホスティング設定では、どちらの次世代フォーマットも JPEG や PNG よりも測定可能なメリットがあります。クリーンな
