⟳最終更新日：2020/07/26
今回はこんな疑問に答えます。
✔この記事を読んでわかること
- 画像圧縮の必要性とは
- オススメのブログ画像圧縮方法【無料】
- サイトの表示速度確認方法
ブログで大量に使う画像ですが、ブログ画像の圧縮はSEO的にも、ユーザー向けにもメリットがあるので絶対にすべきことです。
今回はブログ画像圧縮の必要性と簡単にできる圧縮方法などについて解説します。
画像圧縮の必要性について
ブログで画像圧縮を行わずに使用していると、画像の容量が大きくなり、サイト表示スピードが遅くなる原因になります。
つまり、画像圧縮のメリットはサイトの表示スピードの向上にあるのですね。
画像圧縮の必要性について2つの側面においてメリットがあるので解説していきます。
サイト高速化はSEOに欠かせない
サイトの高速化で得られるSEO効果はユーザーの利便性が関係します。
サイトの読み込みが遅くユーザーが欲している情報をすぐに得られないと検索エンジンが察知するとSEOでの検索表示順位を下げることになります。
実際にGoogleもページの表示速度がSEOに影響することを公言しています。
つまり画像の圧縮を行うことによってSEO的に強いサイトが作ることができるのです。
サイト高速化はユーザーの直帰率に影響する
サイトの読み込みが遅いとユーザーはサイトページを見るのをやめたり、すぐに別のサイトに移動してしまいます。
実際に下記画像を見ていただくとわかりますが、サイトスピードが遅いとユーザーの直帰率に大幅な影響があるのです。
画像出典：Think with Goole
見ての通り、表示速度が1秒のサイトが３秒になると直帰率が32%増え、5秒になると90％増えるのです。
✔直帰率とは
全セッションに対して直帰したセッションの割合を直帰率としてパーセントで表したもの。
ユーザーがサイトを訪れた際に開いたページのみを見て、そのままあなたのサイトから離脱してしまう行動のことを直帰といい、その場合は「１PV １セッション」ということになります。
つまり、表示速度が遅ければ遅いほどユーザーはイライラして別のサイトに行ってしまうということですね。
そのような状況を防ぐためにも画像の圧縮は必須なのです。
オススメのブログ画像圧縮方法
ここでは実際に画像を使いながら4つのステップで圧縮方法を解説していきます。
実際の画像圧縮方法ですがいろいろ試した結果、下記方法が1番ラクで効果的です。
✔ブログ画像圧縮方法
- 画像圧縮ツール「TinyPNG」にて画像を圧縮【ステップ①②】
- wordpressにて画像サイズを調整し軽量化【ステップ③④】
プラグインにて画像を軽量化することもできますが、上記方法での方法をオススメします。
というのもプラグインを入れることによりwordpressが重くなります。無料版のプラグインだと詳細な設定もできませんので、わざわざプラグインを導入するよりは上記方法での圧縮を推奨します。
ちなみに、オススメのプラグインは下記記事にて紹介しています。
ステップ①：TinyPNGにアクセスする
まずは「TinyPNG」にアクセスし、下記画像の赤枠部分に圧縮したい画像をドラッグ&ドロップします。
ステップ②：圧縮した画像をダウンロードする
画像をドラッグ&ドロップすると自動で圧縮が始まります。
圧縮が終わると緑色のゲージの部分が「Finished」という表示に切り替わります。
赤枠のダウンロードをクリックするとPCに圧縮後の画像がダウンロードされます。
ちなみに今回は「1.9MB」から「420.8KB」に圧縮されました。
ステップ③：圧縮した画像をwordpressに取り込む
続いて、先ほど圧縮した画像をwordpressに取り込みます。
取り込み方はwordpressの記事を書いている画面にドラッグ&ドロップするだけですね。
ステップ④：リサイズしてさらに軽量化する
wordpressにドラッグ&ドロップすると下記画面になるので、右側の赤枠「画像を編集」をクリック。
先ほど圧縮して取り込んだ画像の編集画面に切り替わります。
トリミングをクリックすると、画像のサイズが変更できるようになります。
画像の不要な部分をドラッグで調整します(グレーの部分が切り取られる箇所)。
調整ができれば、再度トリミングをクリックし、画像下の「保存」をクリック。
調整した部分が切り取られていることが確認できると思います。
サイズの重いページの確認方法
特にブログを始めた頃は記事執筆に夢中で画像の圧縮まで手が回っていなかったという人も多いのではないでしょうか。
後から画像の圧縮を検討する人は「Googleアナリティクス」で表示速度の遅いページを確認することができます。
Googleアナリティクスの設定がまだの人は、【図解】Google Analytics(アナリティクス)の導入手順と活用のコツ【2020年版】にて詳細を解説しているのでこの機会に是非導入しましょう。
では、確認方法を解説していきます。
①：Googleアナリティクスを開く
最初に「Googleアナリティクス」を開きます。
②：速度についての提案を確認
アナリティクスの左側のメニューから、「行動」→「サイトの速度」→「速度についての提案」をクリック。
③：スコアが低いページを探して画像圧縮をする
「速度についての提案」をクリックすると、下記画像のような画面が開きます。
右側赤枠がスコアになり、目安としては50を下回っていると低速と思ってもらえば大丈夫です。
スコアが50以下を目安に今回紹介した画像圧縮を行なって、ページスピードの改善を行なっていきましょう。
ブログで使用する画像の圧縮方法を解説：まとめ
今回はブログ画像圧縮の重要性と圧縮方法について解説しました。
✔本記事のまとめ
- 画像圧縮の必要性【画像圧縮はSEOにもユーザーにもメリットあり】
- オススメのブログ画像圧縮方法【TinyPNGで画像圧縮、wordpressで調整】
- サイトの表示速度確認方法【アナリティクスで確認し改善】
このサイト重たいな。。。と思われないためにもしっかりサイトスピードを上げていきましょう。
今回は画像についてのお話でしたが、下記記事にてオススメの素材サイトをまとめています。
