あなたのウェブサイトが遅い理由 — 2026 年の画像最適化チェックリスト
今すぐ Google PageSpeed Insights を通じてウェブサイトを実行してください。新しいタブを開いて実行してください。パフォーマンス スコアが 80 未満の場合、最上位の推奨事項は画像に関するものである可能性が高くなります。最適化されていない画像は、Web サイトが遅くなる唯一の最大の原因です。これらの画像は常に、JavaScript、CSS、フォント、HTML を合わせたよりも大きなページ重量を占めています。良いニュースは、画像の最適化が最も簡単なパフォーマンス修正でもあるということです。コードの変更、サーバーの再構成、デバッグは必要ありません。よりスマートな画像を提供します。
ページ重量の最大の問題は画像です
HTTP アーカイブ データによると、画像は平均的な Web ページの総重量の約 42% を占めています。 Web ページのサイズの中央値は約 2.3 MB で、そのうち約 1 MB が画像です。しかし、これは中央値であり、最適化が不十分なサイトでは、通常、1 ページあたり 5 ～ 15 MB の画像が表示されます。メガバイトが増えるごとに、一般的なモバイル接続ではロード時間が約 1 ～ 2 秒増加します。 4G では 10 MB のページが完全に読み込まれるまでに 8 ～ 12 秒かかり、ほとんどの訪問者は 3 秒後に放棄します。
ほとんどの場合、問題は次の 2 つのうちのいずれかです。画像のサイズが大きすぎる (800 ピクセルのコンテナーで 4000 ピクセルの画像を提供する) か、画像の圧縮が不十分である (80% が視覚的に同一である場合に 100% の品質で保存される)。多くの場合、両方です。
チェックリスト項目 1 — 適切なサイズの画像を提供する
これは、単一の最適化の中で最も影響が大きいものです。 CSS が幅 800 ピクセルの画像を表示する場合、画像ファイルの幅は 4000 ピクセルではなく、約 800 ピクセルである必要があります。特大の画像を提供すると、ブラウザによって廃棄されるピクセルに帯域幅が浪費されます。ブラウザの開発者ツールを開いて画像を調べ、表示されたサイズを自然な (ファイル) サイズと比較します。自然なサイズが表示サイズの 2 倍を超える場合、データが無駄になります。
画像が異なる画面に異なるサイズで表示される可能性があるレスポンシブ デザインの場合は、 srcset 属性を使用して複数の画像サイズを指定します。ブラウザは訪問者の画面に最適なものを選択します。一般的なアプローチ: 幅 400 ピクセル、800 ピクセル、1200 ピクセル、および 1600 ピクセルの画像を提供します。 これらのサイズ バリエーションを作成する オリジナルから選択し、ブラウザに選択させます。
チェックリスト項目 2 — 次世代フォーマットの使用
2026 年になっても JPEG ファイルと PNG ファイルのみを提供している場合、潜在的なファイル サイズの 25 ～ 50% の削減が残ることになります。 WebP ほぼ普遍的なブラウザ サポート (全世界で 97% 以上) があり、同じ品質で JPEG よりも 25 ～ 35% 小さいファイルを生成します。 AVIF JPEG よりもさらに優れた圧縮率 (JPEG より約 50% 小さい) が実現され、ブラウザのサポートは現在 92% 以上になっています。
実装は簡単です。 画像を WebP に変換する (プラットフォームがサポートしている場合は AVIF)。互換性を最大限に高めるには、HTML ピクチャ要素を使用して、AVIF をサポートするブラウザに AVIF を提供し、WebP をフォールバックとして、JPEG を最終フォールバックとして提供します。最新の CMS プラットフォームと静的サイト ジェネレーターのほとんどには、これを自動的に処理するプラグインまたは組み込み機能が備わっています。
チェックリスト項目 3 — 遅延読み込みの実装
遅延読み込みでは、表示されているビューポートの下にある画像の読み込みが延期されます。訪問者のブラウザは、ページ上のすべての画像を一度にロードするのではなく、画像の近くをスクロールするときにのみ画像をダウンロードします。これにより、特にポートフォリオ、ギャラリー、長いブログ投稿などの画像の多いページで、最初のページの読み込み時間が大幅に短縮されます。 HTML では、以下を追加するだけで簡単です。 読み込み中=「怠惰」 imgタグに。現在、ほとんどの CMS プラットフォームはデフォルトでこれを実行します。
重要な警告: 初期ビューポート (スクロールせずに見える範囲の上) に表示される画像を遅延読み込みしないでください。ヒーロー画像、ロゴ、およびスクロールせずに表示される画像はすぐに読み込まれるはずです。これらを遅延読み込みすると、最も重要なビジュアル コンテンツのレンダリングが遅れるため、実際には LCP スコアが低下します。
チェックリスト項目 4 — 適切な品質レベルで圧縮する
Web 上のほとんどの画像は、目に見える損失なく 75 ～ 85% の品質まで圧縮できます。 JPEG の 100% と 85% の品質の違いは通常人間の目には見えませんが、ファイル サイズの違いは 2 ～ 3 倍です。 画像をコンプレッサーにかける そして前後を比較してみます。目に見える劣化もなく、どれほど小さくできるかに驚かれるでしょう。
画像パフォーマンスのテストツール
Google PageSpeed Insights: 最適化が必要な特定の画像を特定し、節約額を見積もります。 GTメトリクス: にウォーターフォール チャートが表示されるので、どの画像が速度を低下させているかを正確に確認できます。 ウェブページテスト: ロード中に画像がいつ表示されるかを確認するためのフィルムストリップ ビューを提供します。 Chrome 開発ツール: [ネットワーク] タブでは、リクエストをサイズ別に並べ替えて、最大の違反者を見つけることができます。
チェックリスト項目 5 — 画像の CDN を検討する
コンテンツ配信ネットワークは画像のコピーを世界中のサーバーに保存するため、訪問者は地球の裏側にあるオリジン サーバーからではなく、近くのサーバーから画像をダウンロードします。世界中の視聴者がいるサイトの場合、CDN により画像の読み込み時間を 40 ～ 60% 短縮できます。多くの CDN プロバイダーは、画像の自動最適化も提供しています。訪問者のデバイスとブラウザーに基づいて、その場でサイズ変更、圧縮、形式の変換を行います。
Cloudflare (無料利用枠あり)、BunnyCDN、Amazon CloudFront が人気のあるオプションです。 WordPress を使用している場合、Cloudflare の無料プランだけでも顕著な違いが生じる可能性があります。 Netlify や Vercel などのプラットフォーム上の静的サイトの場合、CDN 配信が組み込まれています。
影響の大きい順に並べた完全なチェックリスト: (1) 表示サイズに合わせて画像のサイズを変更する、(2) 75 ～ 85% の品質で圧縮する、(3) WebP または AVIF に変換する、(4) スクロールせずに見える画像の遅延読み込みを実装する、(5) 複数の画面サイズに応答性の高い srcset を使用する、(6) CDN 経由で配信する、(7) 再訪問者が画像を再ダウンロードしないように適切なキャッシュ ヘッダーを設定する。このリストを確認し、各ステップの後に PageSpeed Insights を実行します。ほとんどのサイトでは、ステップ 1 ～ 3 だけで最大の改善が見られます。
