PageSpeed Insightsの「適切なサイズの画像（Properly size images）」は、ページ上で実際に表示される寸法よりも大きな画像を読み込んでいて転送量が無駄になっていることを指摘する診断項目です。表示は小さいのにファイル自体が大きい画像を、表示サイズに合わせてリサイズしたりレスポンシブ画像で配信したりすることで改善できます。本記事では、この指摘の意味と、2026年時点で推奨される具体的な対処方法を解説します。

この記事の要点
「適切なサイズの画像」は、表示寸法に対して画像の実寸（ピクセル数）が大きすぎることを指摘する項目です。 余分なピクセルは表示に使われず、転送量・通信時間・端末のメモリを無駄に消費します。 主な対処は、表示サイズへのリサイズ、srcset/sizesによるレスポンシブ画像、width/height属性の付与、loading="lazy"の遅延読み込みです。 高精細（Retina）ディスプレイ対応は表示寸法の2倍程度までを目安にし、それ以上の拡大はメリットが小さくなりがちです。

「適切なサイズの画像」が指摘する内容

この項目は、画像が画面上で表示される大きさ（CSSピクセル）に対して、画像ファイルの実際の解像度（実寸ピクセル）が過剰に大きい場合に表示されます。たとえば、横幅400ピクセルの枠に表示する画像に、横幅2000ピクセルの元データをそのまま読み込んでいるようなケースです。ブラウザは大きな画像を縮小して表示するため見た目には問題が出にくい一方で、表示に使われない余分なピクセル分のデータをダウンロードしていることになります。

PageSpeed Insightsは、こうした画像について「どれだけのデータ量を削減できる可能性があるか」を見積もって一覧表示します。指摘される画像が多いほど、また端末の画面が小さいほど、削減できる余地は大きくなる傾向があります。

なぜ問題になるのか

表示に使われない大きな画像は、主に次の点でページの体験に影響します。

• 転送量の増加：必要以上のデータをダウンロードするため、通信量が増え、表示完了までの時間が延びやすくなります。とくに通信が不安定・低速な環境で影響が出やすくなります。
• LCPへの影響：ページ内で大きく表示される画像は、Core Web Vitalsの指標であるLCP（Largest Contentful Paint、最大コンテンツの描画）の対象になることが多く、画像が重いとこの指標が悪化しやすくなります。
• モバイル端末への負荷：スマートフォンは画面が小さく通信環境も変動しやすいため、大きすぎる画像の影響を受けやすく、画像のデコード処理によるメモリや処理負荷も無視できません。

対処方法

① 表示サイズに合わせてリサイズする

もっとも基本的な対処は、画像を実際の表示寸法に近いサイズへ縮小して書き出すことです。表示枠が横幅400ピクセルであれば、おおむねその大きさ（高精細ディスプレイを考慮しても2倍程度まで）の画像を用意します。必要以上に大きい元データを直接配置するのは避けます。多数の画像を扱う場合は、画像処理ツールやビルド時の自動最適化、画像配信サービス（後述のCDN）などを使うと、表示用サイズの生成を効率化できます。

② srcset / sizes でレスポンシブ画像を配信する

画面幅や端末の画素密度はユーザーごとに異なります。srcset属性に複数サイズの画像候補を、sizes属性に表示幅の目安を指定すると、ブラウザが環境に応じて適切な1枚を選んでダウンロードします。これにより、大画面には大きい画像を、小さな端末には小さい画像を配信でき、無駄な転送を抑えやすくなります。

③ width / height 属性でレイアウトのずれを防ぐ

画像にwidthとheight属性（または相当するアスペクト比の指定）を付けておくと、ブラウザが読み込み前に表示領域を確保できます。これにより、画像が後から表示された際にレイアウトが動く現象（CLS、Cumulative Layout Shift＝累積レイアウトシフト）を抑えやすくなります。表示サイズはCSSで調整するとしても、元画像の縦横比に合わせた値を指定するのが基本です。

④ loading="lazy" で遅延読み込みする

画面外（スクロールしないと見えない位置）にある画像にはloading="lazy"を付けると、その画像がビューポートに近づくまで読み込みが先送りされます。これにより初期表示で読み込むデータ量を減らせます。ただし、ページ上部に最初から見えている主要画像（LCP対象になりやすい画像）に遅延読み込みを付けると、かえって表示が遅くなる場合があるため、画面外の画像に限定して使うのが基本です。

実装HTML例

表示幅に応じて複数サイズを出し分けつつ、寸法属性と遅延読み込みを併用する例です。

<img src="photo-400.jpg"     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"     sizes="(max-width: 600px) 100vw, 400px"     width="400" height="300"     loading="lazy" alt="画像の説明">

異なるフォーマットを出し分けたい場合は、picture要素の中で複数のsourceを指定する方法もあります。

<picture>   <source type="image/webp" srcset="photo-400.webp 400w, photo-800.webp 800w" sizes="400px">   <img src="photo-400.jpg" width="400" height="300" loading="lazy" alt="画像の説明"> </picture>

各属性の役割を整理すると次のとおりです。

属性	役割	補足
srcset	画像候補と各幅を列挙	400wのように画像の実寸幅を添える
sizes	表示幅の目安をブラウザに伝える	条件式と幅の組み合わせで指定
width/height	表示領域を事前に確保	レイアウトのずれ（CLS）対策
loading	読み込みのタイミング制御	画面外の画像にlazyを指定

注意したい落とし穴

落とし穴	対策
高精細ディスプレイ対応で過剰に大きい画像を用意する	表示寸法の2倍程度を目安とし、それ以上の拡大は効果が小さくなりやすいため避ける
リサイズで元画像と縦横比が変わり、画像が歪む	アスペクト比を保ったまま書き出し、width/heightも元の比率に合わせる
主要画像にまでloading="lazy"を付け、初期表示が遅くなる	画面内に最初から見える画像（LCP対象）には付けず、画面外の画像に限定する
複数サイズの手動生成が運用負担になる	画像配信サービス（CDN）やビルド時の自動リサイズ機能の活用を検討する

画像配信に対応したCDNやサービスの中には、URLのパラメータなどで配信時に自動でリサイズ・フォーマット変換を行えるものがあります。多数の画像を扱うサイトでは、こうした仕組みを使うことで、表示サイズに応じた最適な画像の生成・配信を運用に組み込みやすくなります。利用できる機能や指定方法はサービスごとに異なるため、採用するサービスの仕様を確認したうえで適用してください。

よくある質問（FAQ）

Q. 画像を圧縮してファイルサイズを小さくすれば、この指摘は消えますか。
A. 「適切なサイズの画像」は画像の実寸ピクセル数が表示寸法に対して大きすぎることを指摘する項目です。圧縮（画質を保ちつつデータ量を減らす処理）はファイルの容量削減には有効ですが、ピクセル数自体は変わらないため、この項目の指摘は解消しないことがあります。表示サイズに合わせたリサイズと併せて対応するのが基本です。

Q. CSSで表示サイズを小さくしているのに指摘されるのはなぜですか。
A. CSSで縮小して表示していても、ブラウザは元画像の全ピクセルをダウンロードします。表示は小さくても読み込んでいるデータは大きいままなので、指摘の対象になります。元画像そのものを表示サイズに近づける、またはsrcsetで小さい候補を用意する対応が必要です。

Q. すべての画像をWebPなどの新しいフォーマットにすれば解決しますか。
A. フォーマットの見直しはデータ量の削減に役立ちますが、それは「次世代フォーマットでの画像の配信」など別の診断項目に対応する施策です。「適切なサイズの画像」は寸法の問題なので、フォーマット変更だけでは指摘が残る場合があります。リサイズやレスポンシブ画像と組み合わせて対処してください。