Webサイトの表示速度を上げる画像最適化完全ガイド

Webページの総容量のうち、画像が占める割合はおよそ半分にのぼります。HTTP Archiveのデータによると、一般的なWebページが読み込む画像の中央値は1MBを超えており、高解像度ディスプレイの普及に伴いその数値は増加し続けています。最適化されていない画像は、サイトの読み込みが遅い原因として最も多く挙げられるもののひとつです。

一方、画像最適化はパフォーマンス改善策の中でも、費用対効果が最も高い取り組みのひとつでもあります。この完全ガイドでは、適切なフォーマットの選び方から遅延読み込み・レスポンシブ画像の実装まで、Web高速化に向けた画像最適化のすべてを解説します。

---

画像最適化がなぜ重要なのか

ユーザー体験への影響

ページの読み込み速度がユーザー行動に影響することは、多くの調査で明らかになっています。

• **モバイルユーザーの53%**が、3秒以上かかるサイトを離脱する（Google）
• ページ読み込みが1秒遅くなるごとに、コンバージョン率が最大7%低下する（Akamai）
• 47%のユーザーが、Webページは2秒以内に読み込まれることを期待している（Kissmetrics）

画像はページ上で最もサイズの大きいリソースであることが多く、最適化による恩恵も最大です。

SEOへの影響

Googleはページ速度をデスクトップ・モバイル両方の検索ランキング要因に採用しています。Core Web Vitals——最大コンテンツ描画（LCP）、累積レイアウトシフト（CLS）、次のペイントとのインタラクション（INP）——はすでにGoogleのランキングアルゴリズムに組み込まれています。最適化されていない大容量の画像は、LCPとCLSのスコアに直接悪影響を与えます。

コストへの影響

トラフィックの多いサイトでは、最適化されていない画像が以下のコストを押し上げます：

• 帯域幅コスト — ファイルが大きいほどデータ転送量が増える
• CDNコスト — エッジサーバーから配信するバイト数が増える
• ストレージコスト — 大きなファイルはサーバー容量を多く消費する

---

ステップ1：適切な画像フォーマットを選ぶ

フォーマットの選択が、ファイルサイズに最も大きな影響を与える単一の要素です。

JPEG / JPG

• 種類： 有損圧縮
• 向いている用途： 写真、グラデーションや多色を含む画像
• ブラウザ対応： すべてのブラウザで対応
• 使用シーン： 商品写真、ヒーロー画像、ブログ記事の画像、背景画像

PNG

• 種類： 無損圧縮
• 向いている用途： スクリーンショット、ロゴ、アイコン、テキスト入り画像・透過が必要な画像
• ブラウザ対応： すべてのブラウザで対応
• 使用シーン： UIパーツ、図表、透過が必要な画像、シャープな輪郭を持つ画像

WebP

• 種類： 有損・無損の両方に対応
• 向いている用途： ほぼすべてのWeb画像（JPEGとPNG双方より優れた圧縮効率）
• ブラウザ対応： 主要ブラウザすべて対応（Chrome、Firefox、Safari、Edge）
• 使用シーン： 新しいWebプロジェクトの標準フォーマット。JPEGより25〜35%、PNGより26%小さい。

AVIF

• 種類： 有損・無損の両方に対応
• 向いている用途： 次世代Web画像（WebPよりさらに優れた圧縮効率）
• ブラウザ対応： Chrome、Firefox、Edge対応。Safariは部分的に対応。
• 使用シーン： プログレッシブエンハンスメント——AVIFを優先して提供し、WebPまたはJPEGにフォールバック

SVG

• 種類： ベクター形式（拡大縮小しても劣化なし）
• 向いている用途： アイコン、ロゴ、イラスト、シンプルなグラフィック
• 使用シーン： 図形やパスで表現できるグラフィック全般

おすすめ： Web画像の標準フォーマットはWebPにしましょう。非対応環境での写真はJPEG、透過が必要な画像はPNGにフォールバックします。

---

ステップ2：画像を圧縮する

フォーマットを決めたら、次は圧縮でさらにファイルサイズを小さくします。

推奨品質設定

圧縮の手順

TinyImg を使ってWebサイト用の画像を圧縮する方法：

1. 画像をアップロード（PNG、JPG、WebPに対応）
2. 画像の種類に応じて品質スライダーを調整（上の表を参照）
3. 圧縮後のファイルをダウンロード
4. Webサイト上の元のファイルと差し替える

すべての処理はブラウザ上で行われるため、画像はプライベートなまま保護され、処理も即座に完了します。

---

ステップ3：レスポンシブ画像を実装する

レスポンシブ画像を使うと、ユーザーは自分のデバイスに必要なサイズの画像だけをダウンロードするようになります。画面幅375pxのスマートフォンユーザーが2000px幅の画像をダウンロードする必要はありません。

srcset 属性

<img
  src="image-800.webp"
  srcset="
    image-400.webp 400w,
    image-800.webp 800w,
    image-1200.webp 1200w,
    image-1600.webp 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Descriptive alt text"
  width="800"
  height="600"
/>

<picture> 要素

複数フォーマットのフォールバックを含む実装：

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Descriptive alt text" width="800" height="600" />
</picture>

Next.js の Image コンポーネント

Next.jsを使っている場合、組み込みの Image コンポーネントがレスポンシブ画像を自動的に処理してくれます：

import Image from 'next/image';

<Image
  src="/hero.webp"
  alt="Hero image"
  width={1200}
  height={600}
  sizes="(max-width: 768px) 100vw, 1200px"
  priority // ファーストビューの画像に指定
/>

---

ステップ4：遅延読み込みを実装する

遅延読み込み（Lazy Loading）は、画面外の画像の読み込みを、ユーザーがスクロールして近づくまで遅らせる手法です。これにより初期ページ読み込み時間が短縮され、ユーザーが見ない可能性のある画像にかかる通信量も節約できます。

ネイティブの遅延読み込み

現代のブラウザは loading="lazy" 属性をネイティブでサポートしています：

<img src="image.webp" alt="Description" loading="lazy" width="800" height="600" />

重要： 最初の表示領域（ファーストビュー）に見えている画像には遅延読み込みを設定しないでください。これらの画像はすぐに読み込まれる必要があり、LCPスコアに影響します。

ベストプラクティス

• ファーストビュー以下のすべての画像に遅延読み込みを設定する
• ファーストビューの画像は loading="eager" を設定するか、属性を省略する
• レイアウトシフト（CLS）を防ぐため、必ず width と height 属性を指定する
• ブラー（ぼかし）プレースホルダーや単色の占有スペースを使うと読み込み体験が向上する

---

ステップ5：適切な画像サイズを指定する

すべての <img> 要素には必ず width と height 属性を指定しましょう。これにより、ブラウザは画像が読み込まれる前に正しいスペースを確保でき、累積レイアウトシフト（CLS）を防げます。

<!-- 正しい例：サイズ指定あり -->
<img src="photo.webp" alt="Photo" width="800" height="600" />

<!-- 悪い例：サイズ指定なし（レイアウトシフトが発生する） -->
<img src="photo.webp" alt="Photo" />

CSSでは aspect-ratio を使うことで、レスポンシブ対応しながら縦横比を維持できます：

img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

---

ステップ6：CDNを活用する

コンテンツデリバリーネットワーク（CDN）は、ユーザーに最も近いエッジサーバーから画像を配信することで、レイテンシを下げて読み込み速度を改善します。

主要な画像CDNには以下があります：

• Cloudflare — 画像最適化付きの無料プランあり
• Cloudinary — 画像変換とCDNを一体で提供
• imgix — リアルタイム画像処理と配信
• Vercel — Next.jsに内蔵された画像最適化

多くのCDNは、対応ブラウザへの自動フォーマット変換（WebPやAVIFの配信）やオンザフライでのリサイズにも対応しています。

---

ステップ7：計測と改善を繰り返す

最適化の実施後は、必ず効果を測定しましょう。

計測ツール

• PageSpeed Insights（pagespeed.web.dev）— GoogleのCore Web Vitals計測ツール
• Lighthouse — Chrome DevToolsに内蔵
• WebPageTest（webpagetest.org）— 詳細なウォーターフォール分析
• Chrome DevToolsのネットワークタブ — 各画像のサイズと読み込み時間を確認

注目すべき指標

---

画像最適化チェックリスト

Webプロジェクトごとにこのチェックリストを確認しましょう：

• 適切なフォーマットを選ぶ（写真はWebP、透過はPNG、アイコンはSVG）
• すべての画像を圧縮する（TinyImg を使えば手軽に対応可能）
• srcset と sizes でレスポンシブ画像を実装する
• ファーストビュー以下の画像に遅延読み込みを設定する
• すべての <img> 要素に width と height を指定する
• CDNを使って画像を配信する
• PageSpeed Insightsで計測し、問題を修正する
• コンテンツを更新したら画像を再圧縮する

---

まとめ

画像最適化は、Webサイトのパフォーマンス改善においてもっとも投資対効果の高い施策のひとつです。適切なフォーマットを選び、しっかり圧縮し、レスポンシブ画像と遅延読み込みを実装するだけで、ページの読み込み速度は劇的に改善し、ユーザー体験とSEOの両方が向上します。

まずは TinyImg で既存の画像を圧縮してみましょう。無料・高速・すべてブラウザ上でローカル処理されます。そのあとはこのガイドのステップに沿って進めていけば、体系的な画像最適化戦略が自然と完成します。

あなたのユーザーも、Googleも、きっと喜ぶはずです。