サイト表示速度

PageSpeed Insightsの「適切なサイズの画像」とは？原因と改善方法をわかりやすく解説

  • 登録：
  • 更新：

サイトの表示速度を診断できるGoogleの無料ツール「PageSpeed Insights」を使ったときに、「適切なサイズの画像」という指摘を見たことはありませんか？このチェック項目は、画像まわりの設定を見直すだけで改善できることが多く、対策の効果も実感しやすいポイントのひとつです。この記事では、「適切なサイズの画像」がどのような状態を指しているのか、なぜ警告が表示されるのか、そして具体的にどう直せばよいのかを順番に解説していきます。

「適切なサイズの画像」とは？

PageSpeed Insightsが指摘する「適切なサイズの画像」とは、簡単にいえば「画面に表示されているサイズに対して、実際に読み込んでいる画像のデータが大きすぎる」状態のことを指します。たとえば、ページ上では横600ピクセル程度の大きさで表示している画像に、横2000ピクセルもあるような元データをそのまま使っていると、ブラウザは表示に必要な量をはるかに超えるデータを読み込むことになってしまいます。

この「ムダなデータ量」が積み重なると、ページ全体の読み込み時間が伸び、表示速度の低下につながります。とくにスマートフォンやタブレットでは画面サイズそのものが小さいため、必要以上に大きな画像を読み込むムダがより目立ちやすくなります。PageSpeed Insightsは、こうした「表示サイズと実際のデータサイズのズレ」を自動的に検出し、改善を促す指摘として表示してくれているのです。

なぜ「適切なサイズの画像」の警告が出るのか

この警告が表示される主な原因としては、次のようなケースが挙げられます。

  • スマートフォンで撮影した写真を、リサイズせずそのままアップロードしている
  • ブログ本文での表示幅は小さいのに、元画像のサイズが必要以上に大きい
  • 高解像度ディスプレイ（Retinaなど）向けに大きめの画像を用意したが、通常表示サイズとの差が大きすぎる
  • テーマやプラグインが、デバイスごとに適切なサイズの画像を自動で出し分けられていない

「きれいに見せたい」という思いから大きめの画像を使うこと自体は決して悪いことではありませんが、実際の表示サイズとかけ離れた大きさのまま配信してしまうと、表示速度の面ではマイナスに働いてしまうということです。なお、PCとスマホで異なるサイズの画像を自動で出し分ける「レスポンシブ画像（srcset属性など）」の仕組みを取り入れることでも、この警告を改善しやすくなります。

「適切なサイズの画像」の改善方法

1. 表示サイズに合わせて画像をリサイズする

もっとも基本的で、かつ効果が高いのが、画像を実際に表示するサイズに合わせてあらかじめリサイズしておくことです。ブログ本文に使う画像であれば、横幅600〜800ピクセル程度を目安にするとよいでしょう。あわせて、ファイルサイズも100〜150KB程度に収まるよう調整できると、ページ全体がぐっと軽くなります。

画像の加工には、無料・有料を問わず使い慣れたソフトやアプリを使えば問題ありません。最低限、拡大・縮小、トリミング、保存形式の変更といった操作ができれば、Web用の画像を用意するのに十分です。

2. 解像度（dpi）を上げすぎない

印刷物に使う画像であれば300dpi程度の解像度が求められますが、Web上で表示するだけであれば72dpi程度で十分です。解像度を下げるとそのぶんファイルサイズも小さくなるため、画像のサイズを調整する際には、解像度が必要以上に高くなっていないかもあわせてチェックしておくとよいでしょう。

3. 保存形式を使い分ける

写真のような色数の多い画像はJPG形式、イラストやロゴなど色数が少なくシンプルな画像はPNG形式で保存すると、画質の劣化を抑えながらファイルサイズを抑えられます。さらにファイルサイズを軽くしたい場合は、WebPのような次世代フォーマットへの変換も検討してみましょう。

画像フォーマットの選び方や、次世代フォーマットでの配信方法については、以下の記事でも詳しく解説していますので、あわせて参考にしてみてください。

4. WordPressのプラグインで自動最適化する

公開済みの記事数が多く、画像を1枚ずつ手作業でリサイズ・圧縮するのが現実的でない場合は、アップロードされた画像を自動で圧縮・最適化してくれるWordPressプラグイン（EWWW Image OptimizerやImagifyなど）を活用する方法もあります。こうしたプラグインの多くは、過去にアップロード済みの画像もまとめて最適化できるため、これまで蓄積してきた記事の改善にも効果的です。

改善できたか確認する方法

すでに公開しているページの画像が適切なサイズになっているかどうかは、「PageSpeed Insights」で簡単に確認できます。調べたいページのURLを入力して分析を実行すると、「適切なサイズの画像」の項目に、対象となっている画像と、それぞれどの程度データ量を削減できそうかが具体的に表示されます。改善作業をひととおり終えたら、もう一度同じページを測定して、警告が解消されているか、スコアが向上しているかをチェックしてみましょう。

なお、画像を最適化してもページの表示速度があまり改善しない場合は、サーバー側の応答速度そのものがボトルネックになっている可能性も考えられます。画像まわりの対策をひととおり済ませても表示速度に伸び悩みを感じる場合は、利用しているサーバー環境の見直しもあわせて検討してみてください。

まとめ

「適切なサイズの画像」は、画面に表示するサイズに対して、画像の実際のデータサイズが大きすぎることが原因で表示される警告です。表示サイズに合わせてリサイズし、解像度を必要以上に高くせず、用途に応じた保存形式を選ぶことで、ページの読み込みを着実に軽くしていくことができます。記事数が多いサイトでは、プラグインによる自動最適化も組み合わせると効率的です。一つひとつの画像を見直しながら、ストレスなく閲覧できるサイトを目指していきましょう。

このテーマの関連記事はこちら