PageSpeedと画像サイズ：ブログが重くなる原因と改善の考え方
公開日
ブログの表示速度を調べるときに、よく出てくるのが PageSpeed Insights です。
そこで「画像が重い」と指摘されて、
- どう直せばいい？
- 画像サイズって何を見ればいい？
と迷うことがあります。
この記事では、PageSpeedと画像サイズの関係を、どうやって直したら良いのか？をまとめます。
PageSpeedで画像が指摘されやすい理由
ページの表示速度は、読み込むデータ量が多いほど遅くなりやすいです。
画像は文章よりもデータ量が大きくなりやすいので、PageSpeedでも「改善ポイント」になりやすい傾向があります。
画像サイズで見るべきポイント（2つ）
1）容量（KB/MB）
画像のファイル容量が大きいほど、読み込みに時間がかかりやすいです。
2）縦横サイズ（px）
表示サイズより大きすぎる画像を入れると、
- 容量が増えやすい
- 読み込みも遅くなりやすい
という問題につながることがあります。
改善の基本：小さくして、軽くする
PageSpeed対策としては、次の流れが取り入れやすいです。
- 表示に必要な縦横サイズに合わせる
- 圧縮して容量を減らす
- 可能ならWebPへ変換する
「見た目を大きく崩さず、Web向けに扱いやすくする」のが基本です。
Petanko Imageでできるこ
Petanko Imageは、画像を軽く・扱いやすくするためのWeb向け画像最適化サイトです。
- 画像圧縮
- WebP変換
などをブラウザだけで行えます。
画像ファイルを外部サーバーへ送信しないため、手元の画像をそのまま処理できます。
【画像例】
※数値は一例です。画像内容によって変わります。
今後も「Webで軽く表示できる画像」を作りやすくなるよう、アップデートを続けていきます。