Webサイトに AVIF追加 2026：5分セットアップ [ステップバイステップ]

なぜAVIFを追加するのか

AVIFサポートの追加はサイトパフォーマンスを大幅に改善します。

画像はしばしばWebページの重量の50-70%を占めます。

より軽いページはより良いSEO、より良いUX、より低いホスティングコストを意味します。

HTML Picture方式

<picture>要素は複数のフォーマットを提供する標準的な方法です。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明" loading="lazy">
</picture>

サーバー設定

AVIFファイルを正しく提供するためにサーバーを設定します。

image/avif MIMEタイプはブラウザがフォーマットを認識するために正しく設定する必要があります。

# Apache (.htaccess)
AddType image/avif .avif

# Nginx
location ~* \.avif$ {
    add_header Content-Type image/avif;
}

CDNと自動化

最新のCDNはAVIFを自動的に処理できます。

• Cloudflare Polish: 自動AVIF変換をアクティブ化。
• Cloudinary: URLにf_autoを追加してオンザフライ変換。
• imgix: 最適なフォーマットを提供するauto=formatパラメータ。
• AWS CloudFront + Lambda: カスタムソリューション。

CSS背景画像

CSS背景画像は異なるアプローチが必要です。

CSSネイティブ検出は信頼性がありません。背景にはModernizrまたはカスタムJS検出を使用してください。

.hero {
  background-image: url('hero.jpg');
}

@supports (background-image: url('test.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

テストと検証

実装が正しく動作していることを確認します。

• DevToolsネットワーク: .avifファイルが互換性のあるブラウザに提供されていることを確認。
• Chrome Lighthouse: 画像最適化の推奨を確認。
• マルチブラウザテスト: Chrome、Firefox、Safari、Edgeでテスト。
• フォールバックテスト: DevToolsでAVIFを無効にしてWebP/JPEGフォールバックを確認。