サイトが重い原因の9割は画像。実測して直す手順

2026年8月 / Web制作・パフォーマンス

「サイトの表示が遅い」という相談は、原因の大半が画像です。しかもほとんどの場合、必要な解像度の何倍もある画像をそのまま置いているだけで、直せば一気に軽くなります。

順番に測って直す手順をまとめます。専門的な環境は要りません。

手順1: まず測る（推測で直さない）

いきなり圧縮を始めないでください。どこが重いのかを先に特定します。感覚で「画像が多いから重いのかな」と直すと、実は別のところがボトルネックだった、ということが起きます。

使うのはブラウザに最初から入っている開発者ツールです。

これで「何が重いか」が上から順に並びます。だいたい画像が上位を占めます。ここで1つ1MBを超えている画像があれば、ほぼ確実にそれが原因です。

ページ全体の合計は、ネットワークタブの下部に出ます。目安として合計2MBを超えていたら要改善、5MBを超えていたらスマートフォンではかなり待たされます。

ここが一番効きます。表示される大きさより極端に大きい画像は、ただの無駄です。

開発者ツールで画像にカーソルを合わせると「実際のサイズ」と「表示サイズ」の両方が出ます。たとえば表示が600px幅なのに実データが4000px幅なら、面積比で約44倍のデータを送っていることになります。

目安はこのくらいです。

「Retina対応で2倍必要では」と思うかもしれません。それは正しいのですが、2倍で十分で、4倍・5倍は要りません。スマートフォンの画面に4000pxの画像を送っても、見た目は1600pxと区別できません。

手元にあった画像で試した実測値です。元は制作物のスクリーンショットで、幅1400pxのPNGでした。

形式・設定	サイズ	削減率
元PNG（1400px）	224 KB	—
JPEG 品質86（1200px）	53 KB	76%減

見た目はほとんど変わらないのに、4分の1以下になりました。写真やグラデーションを含む画像は、PNGよりJPEGのほうが圧倒的に小さくなります。

逆にPNGを使うべきなのは、透過が必要な場合と、文字やアイコンのようにくっきりした線が主役の場合です。ここを取り違えると、JPEGにした結果として文字の周りがにじみます。

# 幅1200pxに縮小してJPEGへ（品質86）
sips -Z 1200 -s format jpeg -s formatOptions 86 input.png --out output.jpg

Windowsなら「縮小専用」などの無料ソフト、あるいはオンラインの圧縮サービスでも同じことができます。

画面外にある画像を、最初から全部読み込む必要はありません。imgタグに1つ属性を足すだけです。

<img src="photo.jpg" alt="説明" loading="lazy">

ただし、最初に画面に見える画像には付けないでください。付けると逆に表示が遅れます。「スクロールしないと見えない画像だけ」が対象です。

画像を削ったのに体感が変わらないなら、原因はページの外にあります。

この場合、いくら画像を圧縮しても解決しません。原因の切り分けが必要です。

よくあるのは次の3つです。

1. サーバーの応答が遅い
ネットワークタブで、HTMLそのものの「待機時間（TTFB）」を見てください。ここが1秒を超えているなら、サーバーやレンタルサーバーのプラン側の問題です。画像は関係ありません。

2. 外部サービスの読み込みが多い
アクセス解析、チャットツール、フォント、埋め込み動画、SNSウィジェット。これらは1つずつは小さくても、数が増えると確実に効いてきます。ネットワークタブで自分のドメイン以外のリクエストを数えてみてください。

3. 作成ツール側の制約
ページビルダーやテーマによっては、使っていない機能のCSSやJavaScriptまで全ページで読み込む作りになっています。これは利用者側では基本的に直せません。

3番目に当たった場合、正直なところ作り直したほうが早いことがあります。私は相談を受けたとき、調べた結果がこれなら「これは中身の問題なので、圧縮しても意味がありません」とそのままお伝えしています。直らないものを直ると言っても、お互いに損だからです。

1から4までは、どれも特別な知識なしでできます。まず測るところから始めてみてください。

公開中のURLを拝見して、原因の切り分けと修正までお引き受けしています。サーバーやCMSのログイン情報はお預かりしません。調べた結果、ページ側では直らないと判断した場合は、その旨を正直にお伝えします。