Page Speed Insights を使用していると、『適切なサイズの画像』という改善指摘項目が出てくることがあります。
この記事では、その改善方法をお伝えします。
このページに書いてあること
『適切なサイズの画像』とは？
Page Speed Insights で下記のようなエラーが出た場合、該当のページで使用している画像のサイズが大きすぎるよ！ということです。
画像ファイルは、テキストコンテンツよりも容量が大きく、ページ全体に閉める割合の大きいデータです。
ただでさえ大きいデータが、適切なサイズではなく、より大きなサイズで読み込まれてしまうと、ページの読み込みに時間がかかり、閲覧ユーザーにストレスを与えてしまうため、UX（ユーザーの体験）が悪くなるので、改善してくださいということなのです。
スマホで撮影された写真をそのままサイトに掲載されている方もいらっしゃいますが、近年のスマホは非常に綺麗に撮影ができますが、その分ピクセル数もデータ容量も大きくなってしまうのです。
ですので、そのような大きな画像データは、画面の表示サイズに合わせて最適化してあげる必要があるというわけなのです。
『適切なサイズの画像』の改善方法
対応方法はシンプルで、『画像のピクセル数を表示するピクセル数に合わせる』ことで改善が可能です。
公式リソースにはこのように掲載されています。
How Lighthouse calculates oversized images
https://web.dev/uses-responsive-images/#how-lighthouse-calculates-oversized-images
For each image on the page, Lighthouse compares the size of the rendered image against the size of the actual image. The rendered size also accounts for device pixel ratio. If the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit.
要約すると、『適切なサイズの画像の検出方法は、ページ上の各画像が表示された画像のサイズと実際の画像のサイズを比較して出している』ということでなので、これを合わせれば改善が可能ということになります。
ウェブ制作者さん向けの解説
ウェブ制作に携わられている方であれば、もうほとんど説明はいらないかと思いますが、下記3点をご確認ください。
- Photoshopなどのデザインツールから、正しいピクセル数で画像が出力されているか。
- コーディング後に個別画像が最終的な表示ピクセル数にあっているか。
- WordPressの『メディア』設定など、CMSの画像解像度設定が実際の表示サイズを考慮して設定されているか。
上記ご確認いただき、画像の表示ピクセル数と実際の画像ファイルのピクセル数を合わせていただくことで改善が可能です。
また、手間はかかりますが、ピクセル数を合わせる以外にも対応策があります。
- レスポンシブ画像対応
- アイコンなどの画像については、SVGなどのベクター画像へ置き換える
という方法で、本記事での詳細説明は割愛しますが、参考リンクを掲載しておきますので、よろしければ参考にしてください。
▼レスポンシブ画像の配信について
▼レスポンシブ画像の配信について
一般の方向けの解説
こちらでは知識が浅い方でもわかるように、少し丁寧に解説をします。
ここでいう画像サイズとは、ピクセル数のことです。
ピクセルに関しての詳細は割愛しますが、簡単いいうと、縦と横の点の数で、画像のサイズで『○○px』とか書いてあるアレです。
このピクセル数で画像の見た目の大きさが変わりますが、ページで表示される大きさと、実際の画像の大きさを合わせる必要があります。
環境によって対応方法が変わります。
Macで適切なサイズの画像の対応をする方法
パソコンがMacの方は、初めから入っているアプリの『プレビュー』で修正ができます。
- プレビューで画像を開く
- 画面常備のメニューバー内の『ツール』 → 『サイズを調整…』をクリック
- 表示されたポップアップウインドウで単位を『cm』 → 『ピクセル』に変更
- 『幅』と『高さ』を表示サイズに合わせて入力
- 『OK』をクリック
- 保存して完了
上記の流れで対応が可能です。
Windows 10で適切なサイズの画像の対応をする方法
パソコンがWindows 10の方は、初めから入っているアプリの『ペイント』で修正ができます。
- ペイントで画像を開く
- リボン内の『ホーム』 → 『サイズ変更』をクリック
- 表示されたポップアップウインドウで単位を『パーセント』 → 『ピクセル』に変更
- 『水平方向』と『垂直方向』を表示サイズに合わせて入力
- 『OK』をクリック
- 保存して完了
上記の流れで対応が可能です。
その他の方法で適切なサイズの画像の対応をする方法
上記の方法は画像を1点ずつ修正していく方法なので、手間もかかりますが、どんな環境でも対応できるように説明しています。
その他の方法でも、ピクセル数さえ合わせられればどんな方法でも構いません。
- Photoshopなどの画像加工アプリを使う
- Webツールなどを使う（『画像サイズ変更』などで検索するとたくさん出てきます）
など、各自の環境に合わせてご対応いただければと思います。
『効率的な画像フォーマット』もついでに確認しよう
画像に関する改善の指摘で、『効率的な画像フォーマット』（旧次世代フォーマットでの画像配信）というものもありますので、合わせて最適化しておきましょう。
過去記事の『次世代フォーマットでの画像配信』に関する記事で詳しく解説しています。
まとめ
画像のピクセル数は、Googleも指摘をしてくるほど表示速度に影響を与えます。
今後の運用の際には、ピクセル数が大きな画像をアップしないような運用にきをつけましょう。
また、Page Speed Insights における画像周りの指摘項目は、本質的な部分で関連している部分が多いです。
画像の修正を行う際は、他の改善項目も一緒に対応してしまった方が楽だと思います。
この記事が多少なりとも、お役に立てばと思います。
記事を読んで不明な点等がありましたらお気軽にTwitter（@kaznak_com）などでご質問ください。
ではまた。
