Guide

ウェブサイト画像をAVIFフォーマットに移行する方法 - 完全ガイド

March 6, 2026

•

7 min read

•

AVIF移行画像最適化ウェブサイトパフォーマンスフォーマット変換

ウェブサイト画像をAVIFに切り替えることは、現在利用可能な最高ROIのパフォーマンス最適化の一つです。正しく実施すれば、画像の総ペイロードが75〜85%削減され、Core Web Vitalsが大幅に改善し、CDNとホスティングコストが削減されます。これらすべてを、ユーザーに見える品質の低下なく実現できます。

なぜAVIFに移行するのか？

フォールバックとデプロイを含むウェブサイト画像のAVIF移行のステップバイステップワークフロー

AVIFへの移行のパフォーマンス面での利点は明確です：

指標	移行前（PNG/JPG）	移行後（AVIF）	改善
ファイルサイズ	100%	15〜25%	75〜85%小さい
ページ読み込み	基準	2〜3倍高速	大幅な改善
帯域幅	100%	15〜25%	75〜85%節約
Core Web Vitals	さまざま	改善	より良いSEO

移行前の評価

ファイルを1つも変更する前に、現状の把握に時間をかけましょう。

ステップ1：現在の画像を監査する

作業対象を目録化：

画像の総数
現在のフォーマット（PNG、JPG、WebP）
総画像ペイロード（MB単位）
フォールドの上に表示される画像（最優先）
高インパクトなページを特定するトラフィックパターン

ステップ2：ブラウザアナリティクスを分析する

Chrome 85以上（AVIF対応）の割合
Firefox 93以上（AVIF対応）の割合
Safari 16以上（AVIF対応）の割合
フォールバックが必要なユーザーの割合（ほとんどのサイトで通常5〜10%）

ステップ3：インフラを評価する

静的サイト： 手動変換が有効
CMS（WordPressなど）： プラグインベースの自動化が最も簡単
カスタムアプリ： ビルドパイプライン統合またはCDN変換
画像最適化機能付きCDN： すでにAVIFをサポートしている可能性あり

移行戦略の選択肢

選択肢1：手動変換（小規模サイト）

100枚未満の画像を持つサイトに最適：

PNG to AVIF コンバーターで画像を変換
AVIFファイルを元のファイルと並べてアップロード
<picture> 要素を使用するようHTMLを更新
テストして展開

選択肢2：ビルドパイプライン統合

現代のWebアプリに最適：

// Next.js の設定（AVIF内蔵サポート）
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
    minimumCacheTTL: 60,
  },
}

選択肢3：CDNベースの変換

大規模サイトに最適：

Cloudflare Images： 対応ブラウザに自動的にAVIFを提供
Imgix： オンデマンドAVIF変換
Cloudinary： f_auto による自動フォーマット選択

ステップバイステップの移行プロセス

フェーズ1：バックアップ

📁 images/
   📁 original/     ← すべてのソースファイルを保持（削除しない）
   📁 avif/         ← 新しいAVIFバージョン
   📁 webp/         ← WebPフォールバック
   📁 legacy/       ← 最大互換性のためのJPG/PNG

フェーズ2：優先度付き変換

インパクトの順に変換：

ヒーロー画像とバナー — 最大のファイル、最初に読み込まれる
商品画像 — Eコマースのコンバージョン率に重要
注目のブログ画像 — 高トラフィックコンテンツ

フェーズ3：フォールバックの実装

すべてのAVIFファイルに <picture> フォールバックパターンを実装：

<picture>
  <!-- AVIF：最高の圧縮、93%のブラウザサポート -->
  <source srcset="image.avif" type="image/avif">
  <!-- WebP：良好な圧縮、97%のブラウザサポート -->
  <source srcset="image.webp" type="image/webp">
  <!-- JPG/PNG：ユニバーサルフォールバック -->
  <img 
    src="image.jpg" 
    alt="商品の説明" 
    loading="lazy"
    width="800" 
    height="600"
  >
</picture>

フェーズ4：CSSバックグラウンド画像

/* デフォルトフォールバック */
.hero-section {
  background-image: url('hero.jpg');
}

/* AVIFサポートのプログレッシブエンハンスメント */
@supports (background-image: url('test.avif')) {
  .hero-section {
    background-image: url('hero.avif');
  }
}

フェーズ5：サーバーMIMEタイプの設定

Apache (.htaccess)：

AddType image/avif .avif
AddType image/avif-sequence .avifs

Nginx：

types {
  image/avif avif;
  image/avif-sequence avifs;
}

画像タイプ別の品質設定

PNGからの変換

PNGコンテンツ	推奨AVIF品質	予想ファイルサイズ
写真	75〜80%	PNGサイズの約5%
イラスト	80〜85%	PNGサイズの約8%
スクリーンショット	85〜90%	PNGサイズの約10%
アイコン/ロゴ	90〜95%	PNGサイズの約12%

JPEGからの変換

JPEG品質	AVIF品質	備考
90〜100%	75〜80%	ほぼ無損失のマッチ
80〜90%	70〜75%	同様の品質
70〜80%	65〜70%	レベルを維持

ベストプラクティス： 元の非圧縮ソースがある場合は、JPEGから再エンコードするのではなく、それを使用してください。

パフォーマンスモニタリング

移行前のベースライン

開始前にこれらの指標を記録：

PageSpeed InsightsスコアとCore Web Vitals
総ページウェイト
LCP（最大コンテンツフルペイント）値

目標指標

指標	移行前	移行後の目標
LCP	> 2.5秒	< 2.5秒
ページ画像ウェイト	基準	50〜70%削減
帯域幅（月次）	基準	70%以上節約

よくある質問

AVIF移行はどのくらい時間がかかりますか？

サイトの規模によります。小規模サイト（100枚未満）：テストを含めて1〜2日。中規模サイト（100〜1000枚）：1〜2週間。大規模サイト（1000枚以上）：CDNベースのアプローチを使用して数週間から数ヶ月にわたって段階的に。

移行後に元のファイルを削除すべきですか？

絶対に削除しないでください。将来の異なる品質設定での再エンコードや、変換問題に対する保険として保持してください。

AVIFの品質が十分でない場合はどうすれば？

品質設定を5〜10ポイント上げてください。特に鋭い幾何学的エッジや純粋なテキストを含む画像は、無損失AVIFやPNGの方が良く見える場合があります。

WebPとAVIFの両方が必要ですか？

最大互換性のために、AVIF → WebP → JPEG/PNGのフォールバックチェーンを使用してください。

AVIF移行によって既存のURLが壊れますか？

正しく実装された場合は壊れません。<picture> 要素は対応ブラウザにAVIFを提供しながら、元の <img> URLを維持します。

まとめ

AVIF移行はウェブサイトのパフォーマンスへの最良の投資の一つです：

画像ファイルサイズの75〜85%削減
ページ読み込み時間の2〜3倍高速化
Core Web Vitalsスコアの大幅改善
帯域幅とCDNコストの70〜80%削減

今すぐ移行を始めましょう：

現在の画像を監査する
最もトラフィックの多い画像から PNG to AVIF 変換を開始
<picture> フォールバックを実装
改善を測定して確認

AVIF移行を開始する →

関連記事：AVIF圧縮ガイド | AVIFアニメーションガイド

関連ツール：PNG to WebP | JPG to AVIF | 画像圧縮ツール