この記事のポイント
- 順位を決めるのは主に中身。そのうえで、表示速度はGoogleの評価の一部になる
- 重い画像は表示を遅くする代表的な原因で、PageSpeed Insightsで確かめられる
- 画像は公開前に、表示する大きさ・形式・品質を整えておくと、まとめて軽くできる
順位を決めるのは中身。そのうえで画像容量が効いてくる理由
はじめに大事なことをお伝えすると、検索順位を決めるのは、主に検索した人の疑問に答えているかという中身です。画像を軽くしただけで、順位が大きく上がるわけではありません。
それでも画像容量を見直したほうがいいのは、表示速度が中身とは別の形で順位に関わっているからです。
表示速度は、Googleの評価の一部
Googleは、ページの読み込みの速さなど「使いやすさ」に関わる指標をCore Web Vitalsと呼び、ランキングで使っていると公表しています。Googleは、使いやすさが平均より下でも最も関連性の高いページを表示するとしつつ、役立つページが多数あるときは、使いやすさが順位を分ける重要な要因になると説明しています。中身で並んだライバルに、表示速度で差をつけられることがある、ということです。
遅いページは、読まれる前に閉じられる
もう1つは、読者の行動です。ページがなかなか表示されないと、読者は中身を読む前に戻ってしまいます。せっかくの記事も、読まれなければ伝わりません。特にスマホで外出先から開く人にとって、重いページは大きなストレスです。
そして、ページを重くする原因として最も多いものの1つが画像です。スマホやカメラで撮った写真は、1枚で数MBになります。文章だけなら数十KBのページでも、写真を数枚そのまま載せるだけで、何十倍もの重さになります。
画像が重いかどうかを確かめる方法
自分のページの画像が重いかどうかは、Googleの無料ツールPageSpeed Insightsで確かめられます。ページのURLを入れるだけで、表示の速さと改善点が表示されます。
画像が原因になっている場合は、「画像配信を改善する」といった画像に関する指摘が出ます。指摘の中には、どの画像をどれくらい軽くできるかの目安も表示されます。主に次のような内容です。
- 大きすぎる
画面に表示される大きさより、ずっと大きな画像を読み込んでいる - 圧縮が足りない
画質をほとんど変えずに、もっと軽くできる - 形式が古い
WebPなど、より軽い形式にすれば容量を減らせる
補足
PageSpeed Insightsの点数は、順位を保証するものではありません。Googleも、点数を満点にすること自体を目指す必要はないとしています。点数よりも、指摘された画像を1つずつ軽くして、ページが速く開くようになることを目的にしてください。
公開前にできる画像の最適化方法
画像の最適化は、公開してから直すより、載せる前に整えておくほうが簡単です。一度公開した画像を差し替えるのは手間がかかりますが、載せる前なら、まとめて同じ設定で処理できます。やることは4つです。
① 表示する大きさに合わせてリサイズする
一番効くのは、画像の縦横の大きさを、実際に表示される大きさに合わせて小さくすることです。横4,000px以上ある写真を、横800pxほどの記事の枠に表示するなら、元の写真の画素のほとんどは使われていません。画素の数は縦×横なので、長辺を半分にすると、画素の数はおよそ4分の1になります。
目安は、表示される幅の2倍です。いまのスマホやパソコンの多くは画面がきめ細かいため、表示幅と同じ大きさだと少しぼやけて見えることがあります。2倍にしておけば、きれいさと軽さのバランスが取れます。
② 画像に合った形式を選ぶ
サイトに載せる写真なら、WebPがおすすめです。JPGより軽くなりやすく、いまの主なブラウザで表示できます。古い環境でも確実に見てほしい場合は、JPGにしておくと安心です。スクリーンショットや図のように、色の少ない画像はPNGのほうがきれいで軽いこともあります。
③ 品質を少し下げる
JPGやWebPには「品質」の設定があります。80〜90%程度に下げても、見た目はほとんど変わらないまま容量を減らせます。気になる場合は、元の画像と並べて見比べてから決めてください。
④ 位置情報を消してから公開する
容量とは別に、公開前に確かめておきたいのが、写真に記録された撮影場所(位置情報)などの情報です。そのまま公開すると、誰でもその写真をダウンロードして撮影場所を調べられることがあります。お店やオフィスなら問題がなくても、自宅やスタッフの私的な場所で撮った写真は注意が必要です。リサイズするときに、こうした情報も一緒に消しておくと安心です。
補足
WordPressの画像圧縮プラグインは、画像をアップロードしたあとにサーバーで処理します。便利ですが、元の大きな画像がサーバーに残ることがあり、プラグインが増えるとサイトの管理も増えます。note・Wix・ペライチなど、プラグインを入れられないサービスもあります。アップロード前に整えておけば、どのサービスでも同じように軽くできます。
表示する場所別、画像サイズの目安
表示される幅の2倍を目安にすると、次のようになります。サイトのデザインによって表示される幅は変わるので、あくまでも目安としてお使いください。
| 表示する場所 | 目安のサイズ |
|---|---|
| 記事の本文中の写真 | 横1200〜1600px |
| 画面の幅いっぱいに表示するメイン画像 | 横1920px |
| アイキャッチ・SNSでシェアされたときの画像(OGP) | 横1200×630px |
| 一覧に並ぶ小さなサムネイル | 横600〜800px |
自分のサイトで表示される幅がわからないときは、ブラウザで画像を右クリックして「検証」を選ぶと、表示されている大きさを確かめられます。
公開前にまとめて画像を最適化できる「DEEPRESS」
FREE MIMETICSの「DEEPRESS(ディープレス)」は、画像をサーバーに送らず、お使いの端末内だけでリサイズ・縮小できる無料ツールです。ここまでの①〜④を、1つの画面でまとめて済ませられます。
まとめて最適化:50枚まで一度に、ZIPで保存
画像をドラッグして入れるだけで、いまの設定ですぐにリサイズします。一度に50枚まで入れられ、「すべてZIPでダウンロード」でまとめて保存できます。記事1本分の画像を、同じ大きさ・同じ形式にそろえてから公開できます。
形式と品質を選べる:WebPにも対応
書き出す形式は、PNG・JPG・WebPから選べます。JPG・WebPは品質も調整でき、「比較」で元の画像と見比べながら決められます。縮小には、ぼやけやギザギザを抑える高品質な方法(Lanczos法)を使っています。
位置情報が残らない:公開前の確認が1つ減る
書き出した画像には、撮影場所・日時・カメラの情報などは含まれません。画像そのものもサーバーに送らないので、公開前の写真や社内の画像も安心して扱えます。
使い方
| 手順 | やること |
|---|---|
| 1. 画像を入れる | 画像をドラッグするか、「画像を選ぶ」を押す。Ctrl+V(Macは⌘+V)で貼り付けもできる |
| 2. 大きさを決める | 「長辺を指定」で1600や1920を入れるか、「サイズ指定」で幅を入れる。OGPは「よく使うサイズ」のボタンで設定できる |
| 3. 形式を選ぶ | サイトに載せるならWebP、古い環境でも確実に見てほしいならJPG。品質は80〜90%を目安にする |
| 4. 保存する | 1枚ずつ保存するか、「すべてZIPでダウンロード」でまとめて保存する。「比較」で元の画像との違いも確かめられる |
写真をメールで送ったり、SNSに投稿したりするときの軽くし方は、「写真が重くて送信・投稿できないときの対処法」で紹介しています。
よくある悩み
画像を軽くすれば、検索順位は上がりますか?
それだけで上がるとは限りません。順位を決めるのは主に、検索した人の疑問に答えているかという中身です。そのうえで、表示速度はGoogleの評価の一部で、同じくらい役立つページが並んだときに差がつく要素になります。中身を整えたうえで、画像容量も見直すのがおすすめです。
WordPressの画像圧縮プラグインを使っていれば十分ですか?
多くの場合は効果があります。ただし、プラグインは画像をアップロードしたあとにサーバーで処理するため、元の大きな画像がサーバーに残ることがあり、プラグインが増えるとサイトの管理も増えます。アップロード前に表示サイズまで縮めておけば、プラグインに頼る部分を減らせます。
WebPにすると見られない人はいませんか?
いまの主なブラウザは、WebPに対応しています。ただし、古いiPhoneなど一部の古い環境では表示できないことがあります。多くの人に確実に見てほしい画像や、メールで送る画像はJPGにしておくと安心です。
画像の容量は何KBくらいを目指せばいいですか?
写真の内容によって変わるため、決まった数字はありません。目安として、記事の中の写真なら数百KB以内に収まると軽いページになりやすいです。大きさを表示サイズに合わせ、形式と品質を見直したうえで、PageSpeed Insightsで画像の指摘が消えるかを確かめてください。
まとめ
検索順位を決めるのは主に中身ですが、表示速度も評価の一部で、遅いページは読まれる前に閉じられてしまいます。そして、ページを重くする原因として最も多いものの1つが画像です。
画像は、公開前に「表示する大きさ」「形式」「品質」を整え、位置情報も消しておきましょう。DEEPRESSなら、記事1本分の画像を、端末の外に出さずにまとめて最適化できます。