ブログ画像のリサイズ・圧縮で『ページ表示速度』を改善【具体的な方法を3つ紹介】

悩んでる人
悩んでる人
ページ表示がすごい遅くて困る。画像の読み込みに時間がかかってるみたいだけど、はやく読み込めるようになる方法ないかな?
たけちよ
たけちよ
このような疑問をたけちよが解決します。
 
 
「WordPressブログの読み込み速度が遅いな~」と感じることはありませんか?
画像が重たいと読み込みに時間がかかり、ページ表示が遅くなるためユーザビリティ・SEO評価、どちらにもマイナスに影響してしまいます。
 
そこで今回は画像のリサイズ・圧縮の具体策を3つほど紹介します。
 
本記事でわかること
  • ブログ画像のリサイズ・圧縮の前に知っておくべきこと
  • ブログ画像のリサイズ・圧縮の具体的な方法

 

本記事の信頼性

当ブログは画像のリサイズ・圧縮をして実際にページ表示速度が向上しています(現在87:Page Speed Insightsで測定)。

※ただし、ほかの対策も施しているので画像リサイズ・圧縮のみで劇的に改善するわけではありません。

 

 

ブログ画像のリサイズ・圧縮の前に知っておくべきこと

ブログ画像のリサイズ・圧縮の前に知っておくべきこと

ブログ画像のリサイズ・圧縮の話をする前に、ブログ画像について知っておくべきことが3つあります。

  • 元の画像サイズは大きすぎる
  • 画像の容量はページ表示速度に影響する
  • ブログ画像の拡張子はJPG/JPEGまたはPNGのみ

 

それでは上記についてそれぞれ詳しく説明します。

 

リサイズ・圧縮方法はこちら

 

元の画像サイズは大きすぎる

スマホで撮影した写真やフリー素材として取得した画像は、基本的に画像サイズが大きいです。

例えば、本記事のアイキャッチ画像の元サイズは『5500×3546px』です。

 

悩んでる人
悩んでる人
その画像サイズの何がいけないの?
 
実はGoogleでは以下のように説明しています。
 
画像の幅は 1,200 ピクセル以上にする必要があります。
(Google検索:構造化データ『Article』)
 
AMPページに関する記述ではありますが、Googleは『幅1200px』を推奨しています。
 

AMP(Accelerated Mobile Pages:通称『アンプ』)とは、モバイル端末でページを高速表示させるための仕組みのこと

 

本記事のアイキャッチ画像の元サイズは、Googleの推奨サイズより4.5倍も大きいため、リサイズをして幅1200pxにしています。

 

たけちよ
たけちよ
特にスマホで撮影した写真や、フリー素材として提供されている画像は、サイズがかなり大きめになっていることがほとんどなので注意が必要です。
 

画像の容量はページ表示速度に影響する

画像の容量が多いと読み込みに時間がかかり、結果としてページ表示速度が遅くなります。

本記事のアイキャッチ画像の元容量は『1.06MB(1060KB)』です。

 

おどろく人
おどろく人
え!?元容量のままだと必要量の10~20倍もあるんだ。

 

記事で使用する画像枚数にもよりますが、基本的に1画像50~100KB以内に収めたいです。

 

たけちよ
たけちよ
容量が必要量の10~20倍も多ければ、画像読み込みに時間がかかるのも当たり前ですよね。
 
Googleも以下のように述べています。
 

モバイルサイトの訪問者の53%が、読み込みに3秒以上かかるページを離れています。
(引用:Think with Google)

 

このように、3秒以内にページが表示されないと半数以上のユーザーがページを読むのをやめてしまいます。

ユーザビリティが低いサイトはSEO評価も下がってしまうため、ページ表示速度を向上させるために画像は50~100KB以下まで圧縮したほうが良いです。

 

ブログ画像の拡張子はJPG/JPEGまたはPNGのみ

画像で使用される拡張子は、主に5種類があります。

  • JPG/JPEG
  • PNG
  • GIF
  • BMP
  • TIFF

 

以上の拡張子のなかで、ブログ画像に使用するのは『JPG/JPEG』と『PNG』のみで良いです。

 

たけちよ
たけちよ
「ブログ画像はJPG/JPEGだけでいい」という意見も聞かれますが、PNGが有効な画像もありますよ。
 
どちらが良い、悪いというわけではないので、使用する画像の種類で判断すると良いです。
 

PNG⇒アイキャッチ画像、スクリーンショット、図や表、文字入れ画像

JPG/JPEG⇒一部の写真(グラデーションやスキャン画像など)

 

結論として、ブログ画像は基本的にPNGにしておけば問題ありません。

ただし、画像サイズによって上記のとおりにならない場合もあるため、『〇〇はPNG』『××はJPG/JPEG』などブログ内で扱う画像のルールを決めておくと良いです。

 

ブログ画像のリサイズ・圧縮の具体的な方法3つ

ブログ画像のリサイズ・圧縮の具体的な方法3つ

次は、本題のブログ画像のリサイズ・圧縮の方法です。

具体策は3つあります。

 

  • 画像のリサイズ『i Love IMG』
  • 画像の圧縮『Tiny PNG』
  • 画像の最適化プラグイン『EWWW Image Optimizer』

 

以上のツールを用いることで、ブログ画像のリサイズ・圧縮は簡単に行うことができます。

それぞれ画像を用いながら説明していきますね。

 

①画像のリサイズ『i Love IMG』

『i Love IMG』はオンラインの画像編集ツールです。

画像のリサイズのほかに、切り抜き、形式の変更などさまざまな編集をすることができる優れもの。

 

ブログ画像のリサイズ手順を説明します。

 

画像のリサイズ手順

  1. i Love IMG』のホームページを開く
  2. 『画像のサイズ変更』をクリックする
  3. リサイズする画像を選択してサイズを指定する
  4. 『サイズ変更された画像をダウンロード』から画像を保存する

 

1.『i Love IMG』のホームページを開く

 

2.『画像のサイズ変更』をクリックする

 

3.リサイズする画像を選択してサイズを指定する

  1. 横縦比を変更する場合はクリック(しない場合は無視でOK)
  2. 横幅を指定する
  3. 高さを指定する(横縦比を変更しない場合は自動入力されます)
  4. 『画像のサイズ変更』をクリック

※横幅はGoogle推奨の『1200px』、高さは『800px』がおすすめです

 

 

4.『サイズ変更された画像をダウンロード』から画像を保存する

  1. 次に行いたいコマンドがある場合は選択する(今回は飛ばします)
  2. 『サイズ変更された画像をダウンロード』をクリックして画像を保存

 

『i Love IMG』を使用した、ブログ画像のリサイズ方法は以上です。

 

たけちよ
たけちよ
操作は簡単だし手軽に行えるから、僕は画像のリサイズで毎回利用しています。
 

②画像の圧縮『Tiny PNG』

Tiny PNGはオンラインの画像圧縮ツールで、PNG以外にJPEG/JPGも強力に圧縮することができます。

 

たけちよ
たけちよ
多くのブロガーが利用しているツールです。
 

ブログ画像の圧縮手順

  1. Tiny PNG』のホームページを開く
  2. 『.pngまたはjpg.ファイルをここにドロップしてください!』をクリック、または画像をドロップする
  3. 画像を選択したら自動で圧縮が開始される
  4. 圧縮が完了したら『ダウンロード』をクリックして画像を保存する

 

1.『Tiny PNG』のホームページを開く

 

2.『.pngまたはjpg.ファイルをここにドロップしてください!』をクリック、または画像をドロップする

 

3.画像を選択したら自動で圧縮が開始される

 

4.圧縮が完了したら『ダウンロード』をクリックして画像を保存する

 

画像圧縮の操作は以上です。

 

たけちよ
たけちよ
とても簡単ですよね。慣れればリサイズから圧縮まですぐに行えますよ。
 
ちなみにTiny PNGは1度に20枚まで同時に画像を圧縮できます。
まとめてダウンロードする場合は、④の工程で『すべてをダウンロード』をクリックすれば、zipファイルでダウンロードされます。
 

③画像の最適化プラグイン『EWWW Image Optimizer』

EWWW Image OptimizerはWordPressプラグインで、過去画像も含めてブログ内の画像を自動で一括最適化してくれるツールです。

 

たけちよ
たけちよ
i Love IMGやTiny PNGは、手動でないといけないので自動で画像を最適化してくれるので、とても便利です。
 
ただし1つ注意点があり『画像が粗くなる』リスクがあります。
 

EWWW Image Optimizer設定手順

  1. プラグイン『EWWW Image Optimizer』をインストール→有効化する
  2. 管理画面の『設定』から『EWWW Image Optomizer』を選択する
  3. 『ベーシック』の設定をする
  4. 『変換』の設定をする
  5. 画面上の『一括最適化』をクリックする
  6. 『最適化されていない画像をスキャンする』をクリックする
  7. 『画像を最適化』をクリックする
  8. 最適化を完了する

 

ここでは設定の細かい説明は省くので、以下の手順に沿って行ってください。

 

1.プラグイン『EWWW Image Optimizer』をインストール→有効化する

 

2.管理画面の『設定』から『EWWW Image Optomizer』を選択する

WordPress

 

3.『ベーシック』の設定をする

  1. 『メタデータを削除』を選択する
  2. デフォルトのままにする
  3. 変更を保存をクリックする

 

4.『変換』の設定をする

  1. 『コンバージョンリンクを非表示』を選択する
  2. デフォルトのままにする
  3. 『変更を保存』をクリックする

 

5.画面上の『一括最適化』をクリックする

 

6.『最適化されていない画像をスキャンする』をクリックする

 

7.『画像を最適化』をクリックする

 

8.最適化を完了する

 

EWWW Image Optimizerの設定と最適化方法は以上です。

上記の項目以外あまり触る必要はありませんが、『WebP』に関しては別記事として紹介します。

 

まとめ:今すぐブログ画像のリサイズ・圧縮をしよう

まとめ:今すぐブログ画像のリサイズ・圧縮をしよう

ブログ画像のリサイズ・圧縮についてこれまで話したことを最後にもう1度まとめます。

 

ブログ画像について大切なこと

  • 元の画像サイズは大きすぎる
  • 画像の容量はページ表示速度に影響する
  • ブログ画像の拡張子はJPG/JPEGまたはPNGのみ

 

画像の拡張子は、基本的にPNGを使用しておけば良いですが、ブログ内で扱う画像のルールを決めておくようにしましょう。

 

ブログ画像のリサイズ・圧縮の方法

  • 画像のリサイズ『i Love IMG』
  • 画像の圧縮『Tiny PNG』
  • 画像の最適化プラグイン『EWWW Image Optimizer』

 

ブログ画像のサイズや容量は、ブログのページ表示速度に大きく関わる重要な要素です。

もし「これまでいい加減に画像貼っていたな~」という方は、今すぐ画像をリサイズ・圧縮して、ユーザビリティが高くSEOに評価されるブログ作りをしていきましょう。

【国内最速!格安レンタルサーバー『ConoHa WING』】

当サイトで契約中のWordPress向けレンタルサーバー!

国内最速サーバー速度&抜群の安定性

初期費用無料&独自ドメイン永久無料

これ1つで簡単にWordPressブログが始められます。

初回限定価格!ブログ運営1ヶ月間の徹底サポート
こちらをクリック
初回限定価格!ブログ運営1ヶ月間の徹底サポート
こちらをクリック