画像を軽くする作業は、「どのページの、どの画像が重いか」を確かめるところから始めます。ホームページの表示が遅い原因は画像だけとは限りません。すべての写真を一括で小さくすると、商品や仕事の細部が読めなくなることもあります。計測したページで、読み込み量が大きい画像を一枚ずつ見直しましょう。
この記事では、画像の表示サイズ、形式、画質、読み込む位置を確認してから、変更前後を比べる手順を説明します。WordPressでの日常的な更新やバックアップの担当を決める話は初心者向けの運用記事へ分けます。
まず遅いページと画像を特定する
トップページ、商品・サービスのページなど、訪問者がよく使うページを一つ選びます。GoogleのPageSpeed Insightsの説明によると、表示される情報には実際の利用者から集まったデータと、一定の条件で再現した検査データがあります。実際の利用者データは件数が足りないと個別ページに出ない場合もあります。数値の出所を確認し、スマートフォンとPCを分けて見ます。
検査結果で画像の配信量や表示までの待ち時間が指摘されたら、その画像のURL、使っているページ、画面上の場所、元ファイルのサイズを控えます。点数だけを追わず、最初の画面の写真や問い合わせボタンが見えるまでの体感も確かめます。Googleのページ体験の案内も、速度の良い数値だけで検索順位が保証されるとはしていません。
画像は使う場所から、五つの順番で見直す
画像の形式、ピクセル数、圧縮率は大切です。ただし幅の正解は一律ではありません。ページ内で実際に見える大きさ、拡大の要否、端末に応じた画像の出し分けを先に確かめます。web.devの画像の表示速度に関する案内は、使う画面に合う大きさと形式で送ることを基本に挙げています。
- 使う場所：最初の画面、記事の下部、商品詳細の拡大表示を分ける。
- 表示幅：表示する大きさに対して過度に大きい画像を使っていないか調べる。
- 形式：写真、透過画像、図など、内容に合う形式を試す。
- 画質：細部、文字、人物の輪郭が崩れない範囲で調整する。
- 読み込み順：最初に必要な画像と、スクロール後でよい画像を分ける。
写真・透過図・イラストで形式を使い分ける
写真はJPEGやWebPなどを候補にし、文字や輪郭のある図、透過が必要な画像ではPNGやWebPなども比較します。新しい形式なら必ず軽いというわけではなく、内容と圧縮設定で結果は変わります。配信環境で使える形式と、古い環境向けの代替画像が要るかも確認します。
| 画像の役割 | まず試すこと | 見た目の確認 |
|---|---|---|
| 商品・人物の写真 | 表示幅に合わせ、JPEGとWebPなどを比較 | 細部、肌、文字入り商品のラベル |
| 透過するロゴ・図 | 透過を保てる形式とサイズを比較 | 輪郭、背景との境界、文字の読め方 |
| 記事中の説明図 | PCとスマートフォン用の表示を確認 | 小画面でラベルや矢印が読めるか |
スマートフォン用に小さい画像を用意する場合も、表示幅だけで元画像を決めません。画面の密度や拡大して見る必要があります。web.devのレスポンシブ画像の案内を参考に、複数の候補から端末に合う画像を選べる配信方法を検討します。利用許諾や公開範囲が限られる写真を外部の圧縮サービスへ送る前には、契約と社内ルールを確認します。
最初の大きな画像を遅延読み込みにしない
スクロールして初めて現れる下部の写真は、表示が近づいてから読み込む設定が役立つことがあります。一方、最初の画面の大きな画像まで同じ設定にすると、表示開始が遅れる場合があります。web.devのLCP最適化の案内は、最初の画面の主要画像を遅延読み込みにしないよう示しています。LCPは、主要な画像や文字が表示されるまでの時間を測る指標です。
WordPressや画像配信サービスが自動で属性を付けている場合もあります。まず実際のページで、最初の大きな画像と記事下部の画像がどう読み込まれるかを確認し、必要な一枚だけ設定を見直します。すべての画像へ同じ属性を一括で付けません。
変更前後は同じページで、画質と表示を比べる
元画像を保存し、使っているページと位置を控えてから、一枚だけ表示幅や画質を調整します。公開前の確認環境で差し替え、PCとスマートフォンで画像が欠けないか、商品や図の説明が読めるか、リンクや問い合わせ操作が妨げられないかを見ます。問題があれば元画像に戻せるよう、差し替え前のファイルを残します。
差し替え後は同じURL・同じ端末条件で再計測し、転送量と表示の変化を記録します。検査データは実行条件によって揺れるため、1回の点数だけで成功と決めません。実際の利用者データがある場合は集計期間も確認します。画像を変えても遅さが残るなら、画像以外の要因を調べます。プラグイン削除、キャッシュ設定、サーバー変更は影響範囲が広いため、原因と復旧方法を確かめてから担当者と進めます。
自社で直せる範囲を決め、残りを相談する
担当者が画像の場所と元ファイルを把握でき、画質を比較して戻せるなら、小さな改善から始められます。複数のページや画像形式、テーマの読み込み方が絡む場合は、計測結果と困っているURLを整理して相談する方が進めやすくなります。Bämの保守・管理の内容を確認し、現在のページの改善については相談ページから状況を伝えられます。
参考資料
- Google Developers「About PageSpeed Insights」（2026年9月24日確認）
- web.dev「Image performance」（2026年9月24日確認）
- web.dev「Responsive images」（2026年9月24日確認）
- web.dev「Optimize Largest Contentful Paint」（2026年9月24日確認）
- Google Search Central「Understanding page experience in Google Search results」（2026年9月24日確認）
