ワードプレスブログで利用する画像の圧縮方法を紹介|表示速度改善

悩んでいる人
悩んでいる人

ブログをしていますが、画像の圧縮って必要なのでしょうか。どうやってすればいいの!?教えてください。

こんな悩みに答えます。

こんにちは、たっつー(@utakata_blog)です。

今回はブログ画像圧縮の必要性簡単にできる圧縮方法などについて紹介します。

大量に使うブログ画像の圧縮はSEO的にも、ユーザー向けにもメリットがあるので絶対にすべきことです。

  • 画像圧縮の必要性とは!?
  • オススメのブログ画像圧縮方法【無料】
  • サイトの表示速度確認方法
たっつー
たっつー

画像の圧縮はたくさんの方法があり迷いますが、いろいろ使ってみた結果、1番簡単かつ効果的な方法を紹介します。

それではさっそく確認していきましょう。

画像圧縮の必要性について

ブログで画像圧縮を行わずに使用していると、画像の容量が大きくなりサイト表示スピードが遅くなる原因になります。

たっつー
たっつー

たまに全然開かないサイトに出くわすことがないでしょうか!?それはサイトの画像容量が大きすぎてなかなか開かないという可能性も大いにあり得るのです。

つまり、画像圧縮のメリットはサイトの表示スピードの向上にあるのですね。
画像圧縮の必要性について2つの側面においてメリットがあるので解説していきます。

サイト高速化はSEOに欠かせない

サイトの高速化で得られるSEO効果はユーザーの利便性が関係してます。

サイトの読み込みが遅く「ユーザーが欲している情報をすぐに得られない」と検索エンジンが察知するとSEOでの検索表示順位を下げることに…

実際にGoogleもページの表示速度がSEOに影響することを公言しているのです。

画像の圧縮を行うことによってSEO的に強いサイトが作ることができるのですね。

サイト高速化はユーザーの直帰率に影響する

サイトの読み込みが遅いと、ユーザーはページを見るのをやめすぐに別のサイトに移動してしまいます。

下記のデータの通り、サイトスピードが遅いとユーザーの直帰率に大幅な影響が。

そのページのセッション(訪問)のうち、そのページを最後に離脱してしまったセッション(訪問)の割合のこと。
画像出典:Think with Google

見ての通り、表示速度が1秒だったサイトが3秒になるだけで直帰率が32%増え、5秒になるとなんと90%増えるのです。

たっつー
たっつー
想像に難くないですが、表示速度が遅ければ遅いほどユーザーはイライラして別のサイトに行ってしまうということですね。

そのような状況を防ぐためにも画像の圧縮は必要不可欠なのです。

ブログ画像の圧縮方法を4ステップで紹介

それでは実際に画像を使いながら画像の圧縮方法を4つのステップで紹介していきます。

画像圧縮の方法はたくさんあるのですが、いろいろ試した結果、下記方法が1番ラクで効果的!!

  1. 画像圧縮ツール「TinyPNG」にて画像を圧縮【ステップ①②】
  2. WordPressにて画像サイズを調整し軽量化【ステップ③④】

プラグインで画像圧縮する方法もありますが、プラグインを入れることによりワードプレスが重くなります。無料版のプラグインだと詳細な設定もできないので、わざわざプラグインを導入するよりは上記方法での圧縮を推奨します。

ちなみに、画像圧縮以外のおすすめプラグインは下記記事にて紹介しているので参考に!!

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-20.42.3[…]

ステップ①:TinyPNGにアクセスする

まずは「TinyPNG」にアクセスし、下記画像の赤枠部分に圧縮したい画像をドラッグ&ドロップします。

TinyPNGは何度も利用していくことになるので、ブックマークしたりブラウザのタブに固定したりしておきましょう。

ステップ②:圧縮した画像をダウンロードする

画像をドラッグ&ドロップすると自動で圧縮が始まり、圧縮が終わると緑色のゲージの部分が「Finished」という表示に切り替わります。

そして赤枠のダウンロードをクリックするとPCに圧縮後の画像がダウンロードされます。

ちなみに今回は「1.9MB」から「420.8KB」なのでサイズを約1/5に圧縮できました、簡単ですね!!

ステップ③:圧縮した画像をワードプレスに取り込む

続いて、先ほど圧縮した画像をワードプレスに取り込みます。

取り込む方法はワードプレスの記事を書いている画面にドラッグ&ドロップするだけですね。

たっつー
たっつー

外部ツールで圧縮後、ワードプレス内でリサイズしていきます。

ステップ④:リサイズしてさらに軽量化する

ワードプレスにドラッグ&ドロップすると下記画面になるので、右側の赤枠画像を編集」をクリック。

先ほど圧縮して取り込んだ画像の編集画面に切り替わるので、トリミングをクリックし画像のサイズを変更していきましょう。

画像の不要な部分をドラッグで調整します(グレーの部分が切り取られる箇所)。

調整ができれば、再度トリミングをクリックし、画像下の「保存」をクリック。

調整した部分が切り取られていることが確認できると思います。

たっつー
たっつー

お疲れ様です。これで圧縮した画像をさらに軽量化することができました。

表示スピードが遅いページの確認方法は!?

悩んでいる人
悩んでいる人

画像圧縮の重要性と圧縮方法は分かったけど、サイトが重いページの確認方法はないの!?

特にブログを始めた頃は記事執筆に夢中で画像の圧縮まで手が回っていなかったという人も多いのでは?

後から画像の圧縮を検討する人は「Googleアナリティクス」で過去の記事まとめて表示速度の遅いページを確認することが可能です。

では、方法を確認していきましょう。

アナリティクスの設定が済んでいない人は下記記事を参考にサクッと登録してください。

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-19.17.2[…]

①:速度についての提案を確認

最初に「Googleアナリティクス」を開きます。

アナリティクスの左側のメニューから、「行動」→「サイトの速度」→「速度についての提案」をクリック。

②:スコアが低いページを探して画像圧縮をする

速度についての提案」をクリックすると、下記画像のような画面が開きます。

右側赤枠がスコアになり、目安としては50を下回っていると低速と思ってもらえば大丈夫。

スコアが50以下を目安に今回紹介した画像圧縮を行なって、ページスピードの改善を行なっていきましょう。

最後に:画像圧縮でSEOに強くユーザーに優しいページを作ろう!!

今回はブログ画像圧縮の重要性と圧縮方法について紹介しました。

おさらいです。

  1. 画像圧縮ツール「TinyPNG」にて画像を圧縮【ステップ①②】
  2. WordPressにて画像サイズを調整し軽量化【ステップ③④】

このサイト重たいな…と思われないためにも画像圧縮は必須、しっかりサイトスピードを上げていきましょう。

今回は以上です。

関連記事

[word_balloon id="unset" position="L" size="M" balloon="talk" name_position="under_avatar" name="困っている人" radius[…]

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-19.17.28.pn[…]

最新情報をチェックしよう!
>当ブログは「THE THOR」で作成しています!!

当ブログは「THE THOR」で作成しています!!

「THE THOR」は集客・収益に徹底的にこだわったテーマです。 MP・PWAなど最新鋭の技術を搭載し、サイトの表示速度はWordPressテーマの中でもトップクラス。

CTR IMG