この記事のポイント

  • 順位を決めるのは主に中身。そのうえで、表示速度は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に投稿したりするときの軽くし方は、「写真が重くて送信・投稿できないときの対処法」で紹介しています。

DEEPRESS 登録不要・無料の画像リサイズ・縮小ツール 開く

よくある悩み

画像を軽くすれば、検索順位は上がりますか?

それだけで上がるとは限りません。順位を決めるのは主に、検索した人の疑問に答えているかという中身です。そのうえで、表示速度はGoogleの評価の一部で、同じくらい役立つページが並んだときに差がつく要素になります。中身を整えたうえで、画像容量も見直すのがおすすめです。

WordPressの画像圧縮プラグインを使っていれば十分ですか?

多くの場合は効果があります。ただし、プラグインは画像をアップロードしたあとにサーバーで処理するため、元の大きな画像がサーバーに残ることがあり、プラグインが増えるとサイトの管理も増えます。アップロード前に表示サイズまで縮めておけば、プラグインに頼る部分を減らせます。

WebPにすると見られない人はいませんか?

いまの主なブラウザは、WebPに対応しています。ただし、古いiPhoneなど一部の古い環境では表示できないことがあります。多くの人に確実に見てほしい画像や、メールで送る画像はJPGにしておくと安心です。

画像の容量は何KBくらいを目指せばいいですか?

写真の内容によって変わるため、決まった数字はありません。目安として、記事の中の写真なら数百KB以内に収まると軽いページになりやすいです。大きさを表示サイズに合わせ、形式と品質を見直したうえで、PageSpeed Insightsで画像の指摘が消えるかを確かめてください。

まとめ

検索順位を決めるのは主に中身ですが、表示速度も評価の一部で、遅いページは読まれる前に閉じられてしまいます。そして、ページを重くする原因として最も多いものの1つが画像です。

画像は、公開前に「表示する大きさ」「形式」「品質」を整え、位置情報も消しておきましょう。DEEPRESSなら、記事1本分の画像を、端末の外に出さずにまとめて最適化できます。