この記事はWP使いには超盲点の内容です
ブログの記事数が増え、PV数が増えていくとSEO的に何か改善できることはないか?と考えるようになりますよね。それはテールワードの選び方であったり、記事の構成であったり…。そして中でも大半の人がページ表示スピードのスコアを気にすると思います。これを改善したいと思う人は多いはず。
ページスピードのスコアに大きく影響を与える要因として代表的なのが画像容量ですが、この画像ファイルが与える影響と解決策について紹介していきたいと思います。
ワードプレスと画像容量の関係
ワードプレスはシステムということを知ろう
ワードプレスは誰でも気軽にwebサイトを更新することができるシステムです。そんなん知ってるわ!と思うかもしれませんが、このシステムであるという点を念頭に置かないと今後のサイト運営で「なんでできないの?」と意固地になってしまうことがあります。
システムだからできないことはできないんだね。って捉えられるスタンスを持つことは重要です。
画像容量の与える影響は4倍
さて、先程ワードプレスはシステであると説明しましたが、皆さんは記事に載せたい画像を気軽にアップロードしてますよね。
しかも、そのアップロード画像のサイズまで自動で選ぶことができますね。画像サイズが大きければ最大で、[サムネイル、中、大、オリジナル]のサイズを選ぶことができます。
画像選択の時に、1枚の画像をワードプレス側で勝手にリサイズして選べるようにしてくれていると思っていませんか?
実はこれ、画像1枚を4枚の画像として自動アップロードされているんですよ。
実はワードプレス内では、上記の図のようにアップロードした画像はサイズごとにデータベースに出力されます。制作陣に言われて初めて知ったと同時に、確かに画像ファイルを予め用意しないとデータの吐き出しなんて出来ないよなと気付きました。
画像最適化する手段
TinyPNGを使用する
タイニーピングと読みます。タイニーピングは画像の品質を落とさず画像容量を落とすことが出来る最強のwebサービス。なぜ最強かというと、完全無料だから。
こちらにワードプレスにアップする前の画像をアップロードし、ダウンロードするだけでOK。画像によっては1/4近く圧縮することが可能です。ワードプレスにアップロードする前は画像1枚でも絶対にやるべきでしょう。
画像最適化プラグインを入れる
画像最適化プラグインにもCompress JPEG & PNG imagesやEWWWImageOptimizerなどがありますが、プラグイン自体がワードプレスに負荷を与えるものなので、先述した試作を行っているなら入れる必要はないと考えます。
ただ、最適化していない画像もあるという場合は、プラグインを入れて最適化をかけた方が良いでしょう。プラグイン不使用時は無効状態にしておくようにしましょう。
PNGを使いすぎない
画像容量はJPGかPNGかによって大きくことなります。画像サイズの小さいものであれば、JPGもPNGも対して変わらないと思いますが、記事内に挿入する画像サイズでは大きく差が出ます。それぞれの使用場面を以下にまとめました。
綺麗な写真を挿入したい場合はPNGファイルを選ぶようにしましょう。PNG画像はできるだけ最適化が必要です。景色写真や人物の宣伝写真などはPNGが望ましいですね。
イラスト画像など簡単な図解などは鮮明度が落ちてもユーザーに不利益にならないのでJPG画像にしておくのがベスト。当ブログのアイコン画像はJPGだったかな?
画像サイズは統一しておく
これは非常に大切。
サイトのコンテンツが表示される領域(横幅)は大体の限界値が決まっています。特にブログはスマホから流入がほとんどなので、画像の横幅は768pxあれば十分です。
768pxはスマホ画面に移行する時の基本サイズを指します。最近では820pxも増えているようですが、近年のiPhonも小さいので768pxが無難です。
また、PC表示でも大体のサイトはサイドバーが付いていると思うので横幅が足りないなんてことは起きないでしょう。よく自慢の一眼レフで撮った写真をそのままアップロードする人がいますが、4000px以上のサイズをアップロードするなんて自殺行為でしかありません。
自身のブログコンテンツにアップロードする画像サイズを事前に決めておき、canvaなどでリサイズしてからアップロードするようにしましょう。
アイキャッチ画像だけ1200×630px以上が望ましい
記事のアイキャッチに使う画像だけは大きいサイズにする必要があります。というのもSNSはもちろん、Google砲と呼ばれるディスカバーに掲載されるには1200×630px以上の大きい画像が必要と推奨されているからです。
まとめ
実は知らないワードプレスの仕様についてのお話でした。意外と知らない人も多かったのではないでしょうか。気軽にアップロードしていた画像が4つのサイズに振り分けられるって結構恐ろしい話ですよね。
サイズがそれぞれ異なるので単純に容量が4倍とは言えませんが、4つに出力されるという意味では4倍ですね。サイト運営していく上で”面倒”ではありますが、チリも積もれば…ですので更新や新規追加する際はしっかり画像の最適化を行っていきましょう。