最適化されていないヒーロー画像1枚が、ウェブページ全体のHTML、CSS、JavaScriptの合計よりも重くなることがあります。画像は平均的なウェブページの**総バイト数の約50%**を占め、パフォーマンス改善のための最大のレバーです。にもかかわらず、画像最適化はWeb開発とコンテンツ制作で最も誤解されている側面の一つです。
影響は読み込み速度をはるかに超えます。画像サイズは検索ランキング、ホスティング費用、ユーザーのデータプラン、さらにはコンバージョン率にも影響します。
パフォーマンスとの関連：Core Web VitalsとLCP
GoogleのCore Web Vitalsは検索ランキングに直接影響するメトリクスのセットです。その中で**Largest Contentful Paint（LCP）**は、画面上で最大の可視要素がレンダリングされるまでの時間を測定します。ほとんどの場合、その要素は画像です。
Googleは2.5秒未満のLCPを「良好」とみなします。2.5〜4秒は「改善が必要」。4秒以上は「不良」です。標準的な接続で3MBのヒーロー画像があれば、LCPは簡単に4秒の閾値を超え、ページ全体を「不良」カテゴリに引きずり込みます。
結果は具体的です：
- SEOランキングの低下 — Core Web Vitalsはランキングシグナル；遅いページは順位を失う
- より高い離脱率 — モバイル訪問者の53%がページの読み込みに3秒以上かかると離脱
- 低いコンバージョン — 読み込み時間が1秒増えるごとにコンバージョンが約7%低下
100KBの目安 ウェブページのコンテンツ画像は1枚あたり100KB未満を目標にしましょう。全幅のヒーロー画像は200KB未満に。これらの目標は最新のフォーマットと適切な圧縮で、目に見える品質低下なしに達成可能です。
ロッシーとロスレス：トレードオフの理解
すべての画像圧縮は2つのカテゴリに分かれ、間違った方を選ぶとファイルが膨れ上がる一般的な原因になります。
ロスレス圧縮は同じデータをより効率的にエンコードすることでファイルサイズを削減します。すべてのピクセルが正確に保持されます。削減は控えめで、通常10-30%です。PNGはロスレス圧縮を使用します。
ロッシー圧縮は人間の目が気づかないであろう情報を破棄します。グラデーションの色精度、細かいテクスチャの詳細、微妙な階調変化が簡略化されます。削減は劇的で、通常70-90%です。JPEGとWebP（ロッシーモード）はこのアプローチを使用します。
重要な洞察は、品質80-85%のロッシー圧縮は写真に対してオリジナルと視覚的に区別不可能だということです。知覚上の差はほぼゼロですが、ファイルサイズの差は膨大です。
| アプローチ | サイズ削減 | 品質損失 | 最適な用途 |
|---|---|---|---|
| ロスレス（PNG） | 10-30% | なし | ロゴ、スクリーンショット、テキスト主体のグラフィック |
| ロッシー85%（JPEG/WebP） | 70-85% | 知覚不能 | 写真、イラスト、背景 |
| ロッシー60%（JPEG/WebP） | 85-95% | 拡大すると分かる | サムネイル、装飾画像 |
多くの人が犯す間違いは、写真にロスレス圧縮を使用したり、重要なビジュアルにあまりにも低品質のロッシー圧縮を使用することです。どの画像にどの処理が必要かを理解することが、効果的な最適化の鍵です。
フォーマットが重要：同じ画像、大きく異なるサイズ
画像フォーマットの選択は圧縮レベルと同じくらいの影響があります。PNGで保存された写真は、品質85%のJPEGで保存された同じ画像の5〜10倍大きくなり得ます — 知覚可能な差はありません。
JPEGは写真のユニバーサルスタンダードであり続けます。どこでもサポートされ、写真コンテンツに対して優れたロッシー圧縮を提供します。
WebPは同等の視覚品質でJPEGより25-35%小さいファイルを提供し、さらに透過をサポートする利点があります。すべての最新ブラウザがサポートしています。今日のWeb用の最良の汎用フォーマットです。
AVIFは最新の候補で、WebPよりもさらに良い圧縮（約20%小さい）を提供しますが、ブラウザサポートとエンコード速度はまだ追いつきつつあります。
PNGは正確なピクセル再現が必要な画像にのみ正しい選択です — ロゴ、アイコン、テキストを含むスクリーンショット、またはWebPがオプションでない場合の透過が必要な画像。
帯域幅とストレージ：隠れたコスト
個人ブログや小規模サイトでは、帯域幅コストは無視できるように見えるかもしれません。しかし急速にスケールします：
- 月に10,000回閲覧される2MBの画像があるページは、月に20GBの画像データを転送
- 画像を合計400KBに最適化すると4GBに削減 — 80%削減
- 従量課金のホスティングでは、これが直接的な請求額の削減に
ストレージも積み上がります。5,000商品、各4枚の未最適化画像（各2MB）のeコマースサイトは、商品写真だけで40GBを使用。各200KBに最適化すると4GBに。
レスポンシブ画像とデバイスの問題
375ピクセル幅のスマホ画面に表示される1920ピクセル幅の画像は、ピクセルの96%以上を無駄にします。ブラウザは完全な画像をダウンロードし、画面に収めるためにほとんどのデータを破棄します。
解決策はレスポンシブ画像 — デバイスごとに異なる画像サイズを配信することです。モバイル訪問者には400px幅の画像、デスクトップ訪問者には1200px幅のバージョンを配信します。
遅延読み込み：見えないものをダウンロードしない
ファーストビュー以下の画像 — スクロールしないと見えない画像 — はすぐに読み込む必要はありません。遅延読み込みは、ユーザーが近くにスクロールするまでダウンロードを延期します。
最新のブラウザは単一のHTML属性でネイティブの遅延読み込みをサポートします。利用可能な最もシンプルで効果的な最適化の一つです。
CDN：エッジからの画像配信
コンテンツデリバリネットワークは画像のコピーを世界中のサーバーに保存します。東京の訪問者はパリのオリジンサーバーではなく近くのサーバーから画像を取得します。これによりレイテンシが減少し、読み込み時間が改善され、インフラへの負荷が減少します。
多くの最新CDNはオンザフライの画像変換も提供します — オリジナルファイルに触れることなく、自動的にWebPに変換、デバイスごとにリサイズ、最適な圧縮を適用。
さらに詳しく
画像最適化は、小さな改善が大きな結果に複合する分野です。圧縮レベルを実験し、品質対サイズのトレードオフをリアルタイムで確認したい場合、toolk.ioはブラウザ内ですべてを処理する画像圧縮ツールを提供しています。画像の圧縮やフォーマット間の変換のチュートリアルもサイトで利用可能です。