PageSpeed・サイト高速化

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

  • 登録：
  • 更新：

Googleが提供する無料のページ診断ツール「PageSpeed Insights」では、Webページの表示速度を改善するためのヒントが得られます。その診断項目のひとつが「適切なサイズの画像」です。この記事では、「適切なサイズの画像」とは何を指すのか、なぜ警告が出るのか、そして具体的な改善方法までをわかりやすく解説します。

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

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

その結果、本来は不要なはずのデータ量をダウンロードすることになり、ページの読み込みが遅くなります。特にスマートフォンやタブレットからの閲覧では、画面が小さいぶん表示サイズも小さくなるため、大きすぎる画像のムダがより目立ちます。PageSpeed Insightsはこうした「表示サイズと実寸のズレ」を見つけて、適切なサイズに直すよう促してくれるわけです。

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

主な原因は次のとおりです。

  • スマホで撮った写真を、リサイズせずそのままアップロードしている
  • 表示幅は小さいのに、元画像が必要以上に大きい
  • 高解像度（Retina）対応で大きめに用意したが、表示サイズとの差が大きすぎる
  • テーマやプラグインが、適切な画像サイズを自動で出し分けられていない

つまり、「きれいに見せたい」という意図で大きな画像を使うこと自体は悪くないのですが、表示サイズとかけ離れていると速度面でマイナスになる、ということです。

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

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を入力して「分析」をクリックすると、「適切なサイズの画像」の項目に、どの画像がどれだけ削減できるかが具体的に表示されます。改善後にもう一度測定し、警告が消えているか・スコアが上がっているかを確認しましょう。

なお、画像を最適化しても表示速度が思うように改善しない場合は、サーバーの応答速度そのものがボトルネックになっていることもあります。表示速度に悩んでいる場合は、サーバー環境の見直しも検討してみてください。

まとめ

「適切なサイズの画像」は、表示する大きさに対して画像の実寸が大きすぎることが原因で出る警告です。表示サイズに合わせてリサイズし、解像度を上げすぎず、適切な保存形式を選ぶことで、ページの読み込みを軽くできます。記事数が多い場合はプラグインでの自動最適化も有効です。画像を見直して、快適に閲覧できるサイトを目指しましょう。

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