WordPress WordPressプラグイン WordPress初期設定

【WordPress画像圧縮で高速化プラグイン】EWWW Image Optimizerの設定方法と使い方

【WordPress画像圧縮で高速化させるプラグイン】EWWW Image Optimizerの設定方法
まう
WordPressにアップロードしている画像を圧縮して軽くするとブログの表示速度が改善できると聞きました。どうやったらできますか?

 

うた
そんな疑問に答えます👍

 

こんな悩みを解決します

ブログ初心者

ブログ初心者くん

  • 画像の容量を考えないでアップロードして取り返しがつかなくなっている
  • 画像を劣化させないで圧縮したい
  • 表示速度を高速化させたい

この記事の内容は?

  • 画像を圧縮すると表示速度が速くなる理由
  • 過去にアップロードした画像を一括で圧縮する方法
  • EWWW Image Optimizerの設定方法

エモいブログへようこそ。本記事の信頼性

【ブログ歴8年,美容師歴13年】フリーで美容師をやりながら、ブログでご飯を食べています。フリーランス向けのブログ集客や副業ブログの始め方などを中心にブログを更新していきます。ブログについて疑問などがあれば気軽にTwitterからDMください。

 

WordPressにはいくつか表示速度を低下させる原因になる要因があり、その中の1つで今回は画像サイズ(容量)による表示速度の影響についてです。

 

JPEGやPNGという画像形式をWordPressで使う事になると思うのですが「PNGの高画質画像、JPEGのデータのサイズ大きい画像」をアップロードし続けるとブログの表示速度が恐ろしいほど低速化してしまいます。

 

うた
僕の場合は、JPEG形式で1000×500PXで画像を調節をしています。

 

画像の表示速度問題を解決したい場合にオススメのプラグインで、インストールして設定したら自動で圧縮してくれるようになるので、設定してみてください。

 

それでは、本題にはいります。

 

Let's Go!!!

 

EWWW Image Optimizerについて【重要】

EWWW Image Optimizerについて

EWWW Image Optimizerについて

うた
EWWW Image Optimizer画像を劣化させることなく、自動で画像サイズの圧縮やリサイズしてくれるプラグインです。

 

記事を書いている時に画像を使って説明する場合に、どんどん画像をアップロードしていくと表示速度に影響が出てしまい、せっかく詳しく専門性の高い記事を書いても読み込みに時間がかかってしまうと離脱率が高くなってしまいます。

 

僕もブログの開設方法や色々な設定の方法を画像を使いまくっているので、EWWW Image Optimizerは必須プラグインになっています。

 

このプラグインはインストールするだけでも表示速度が変わります。

 

そして、さらにスピードを上げる設定を紹介していくので参考にしてみてください。

 

WordPressに画像をアップロードする前の注意ポイント。

PNGとJPEG形式の違いがわかっている場合は読み飛ばしOKです。

 

画像形式

  • PNG 画質は綺麗で写真向き(重たい)
  • JPEG 写真以外に向いている(軽い)

 

なるべくJPEG形式でアップロードしましょう!PNGは2倍ぐらい重たくなる場合があります。

 

画像自体のサイズにも注意してください。作成した時点で1000×500でJPEGで設定しておくといいですよ!

 

面倒かもしれませんが、iloveimgで圧縮をしてからWordPressにアップロードして、さらにEWWW Image Optimizeで圧縮すると高速で画像が表示されるようになります。(最後に書いてあるのでこのまま読み進めてください)

 

EWWW Image Optimizerのメリット

うた
EWWW Image Optimizerのメリットについて

 

  • 画像を劣化する事なく圧縮してくれる。
  • 画像のリサイズも自動でしてくれる。
  • WebPの画像フォーマットが使える。
  • 過去にアップロードした画像も一括で圧縮できる。

 

ブログの表示速度で一番原因になるのは、サイズの大き過ぎる画像を使い過ぎる事です。圧縮してくれるとはいえ、アップロードする画像自体に注意が必要です。

 

うた
他にもブログの表示速度を高速化できるようなプラグインがあるので参考にして設定してみてください。

 

 

EWWW Image Optimizerのデメリット

うた
EWWW Image Optimizerのデメリットについて

 

  • WebPに設定するのが少し大変
  • 設定をミスるとエラーが起きる

 

エラーが起きた場合には、プラグインの停止や削除をしてWordPressテーマや他のプラグインとの機能の重複を疑ってください。

 

うた
ブログのバックアップさえとっておけばミスって取り返しの使いない事になっても安心なので、必ずバックアップは定期的に行うようにしてくださいね。

 

【WordPressバックアップ系プラグイン】BackWPupの設定方法
参考【WordPress自動バックアップ系プラグイン】BackWPupの設定方法と使い方

続きを見る

 

EWWW Image Optimizerの設定方法と使い方【本編】

EWWW Image Optimizerの設定方法

EWWW Image Optimizerの設定方法

新規プラグイン追加でEWWW Image Optimizerをインストールしてください。

 

プラグインのインストール方法がわからない場合は、WordPressプラグインのインストール方法【アプリ感覚でプラグイン検索】をご覧ください。

 

有効化したら

  1. 設定
  2. EWWW Image Optimizer

と進みます。

 

EWWW Image Optimizer 基本設定

EWWW Image Optimizer 基本設定

EWWW Image Optimizer 基本設定

  • 今は無料モードに設定
  • メタデータを削除にチェック
  • 画像リサイズはお好みに設定
  • 不足している寸法にチェックなし
  • 遅延読み込み2つのチェック

 

EWWW Image Optimizer 基本設定2

EWWW Image Optimizer 基本設定2

ここは何もしなくて大丈夫です。

 

WebPの設定

WebPの設定

少しだけむずかしい事をしますが、WebPにすると画像の読み込み速度がさらに上がります。

 

ConoH Wingでの設定方法を説明していくので、とりあえずWebP交換にチェックをいれてください。

 

WebPの配信方法という画面が出てきて、画面右下に現在は赤い文字でPNGと表示されているはずです。(後程でWebPに変えます)

 

こちらもチェックを入れないで保存してください。

 

そして、EWWW Image Optimizerをもう一度クリックしてください。

 

Enable Ludicrous Mode

Enable Ludicrous Mode

Enable Ludicrous Modeをクリックしてください。

 

交換リンク非表示にチェックを入れる

交換リンク非表示にチェックを入れる

交換リンク非表示にチェックを入れる。

 

基本設定はこれで終了です。

 

次世代フォーマット『WebP』の設定手順【重要】

次世代フォーマットWebPとは?

次世代フォーマット『WebP』の設定手順をする。

次世代フォーマット『WebP』の設定手順をする。

WebPは次世代フォーマットの一種で、従来のPNGやJPEGより圧縮性能の高いのが特徴です。

 

次世代フォーマット

 

WebPはGoogleが開発している画像フォーマットで、とにかく軽い画像形式という認識でいいと思います。

 

まだ主流ではないですが、将来的な事を考えて表示速度を上げるために設定しておきましょう。

 

ConoHawingでWebPを設定する方法。

WebPの設定

WebPをコノハウィングに設定する

WebPの配信方法をすべてコピペしてください。

 

WebPをコノハウィングに設定する2

WebPをコノハウィングに設定する2

コノハウィングにログインをして、ファイルマネージャーを開きます。

 

.htaccessを探す

.htaccessを探す

自分のドメインのところをクリックするとデータファイルがたくさん表示されます。

 

うた
頭が痛くなりますよね。。変な場所はいじらないようにしてください。

 

.htaccessを探してください。

 

.htaccessを探す2

.htaccessを探す2

見つけたら右クリックでテキストエリアを開いてください。

 

.htaccessをWebPコードを貼り付けする

.htaccessをWebPコードを貼り付けする

絶対関係ない場所はいじらないでください。

 

WebPの配信方法でコピーしたコードを一番下に貼り付けて保存します。

 

はい、成功です。

 

さっきの赤い文字のPNGが緑のWebPに変わりました。

 

これで画像が爆速表示されます。

 

EWWW Image Optimizerが機能しているか確認しよう

EWWW Image Optimizerが機能しているか確認する。

EWWW Image Optimizerが機能しているか確認

  1. 管理画面
  2. メディア

画像一覧を見たときにこんな感じになっていれば完璧です。

 

 

EWWW Image Optimizer使い方の手順2

 

アップロード済みの画像は

  1. メディア
  2. 一括最適化

という流れで確認できます。

 

EWWW Image Optimizer使い方の手順3

 

僕の場合66点の画像を最適化をクリック

 

EWWW Image Optimizer使い方の手順4

 

たまに一括最適化を押したら圧縮漏れの画像も処理してくれますよ。

 

うた
これで過去にアップロードした画像も最適化されました。

 

以上です。おつかれさまでした。

 

さらに画像サイズを圧縮して表示速度を上げる方法。【おまけ】

うた
WordPressにアップロードする前に一度圧縮をしておくことでさらに圧縮する事ができます。

 

面倒ですが、こっちの方が圧縮の効果が高いので表示速度の高速化を求める方にオススメの方法です。

 

compresspngで画像の圧縮

compresspngで画像の圧縮

compresspngで画像の圧縮

compresspng.comを試してみました。

 

https://compresspng.com/ja/

 

正直なところ毎回はめんどくさいと思いますが、効果あります。

 

Jpeg、Png、PDFの3種類のファイルを圧縮する事ができます。

 

compresspngを試してみた結果は軽くなりました

compresspngを試してみた結果は軽くなりました

とりあえず、JpegとPNGで試したところ

 

  • jpegは21%
  • PNGは60%

 

ちりも積もれば山となるので画像をたくさん使う方は利用してみてください。

 

iloveimgで画像を圧縮

iloveimgで画像を圧縮

iloveimgで画像を圧縮

僕は最近はこっちの方が使いやすいので「iloveimg」を使い画像圧縮をしています。

  • 画像圧縮
  • リサイズ
  • 切り抜き
  • JPEG形式に変換

 

スクショの画像とか意外と重たかったりするので、一括で全部できるのは助かりますね。

 

EWWW Image Optimizerで圧縮するまえに試してみてください。

 

EWWW Image Optimizerについて【まとめ】

EWWW Image Optimizerについて【まとめ】

EWWW Image Optimizerについて【まとめ】

うた
EWWW Image Optimizerについて、まとめます。

 

  • WordPressにアップロードした画像サイズを自動で圧縮できる
  • WebPを導入するとさらに爆速になる(将来的に)
  • 画像を圧縮してからアップロードするとさらに効果的

 

画像が与えるブログの表示速度の影響は大きく、表示速度が低速の場合は読者の離脱率が上がったり、SEOでもマイナスの評価を受けてしまうので対策が必要です。EWWW Image Optimizerは画像を劣化させずに自動で圧縮してくれるプラグインなのでインストールしておきましょう!

 

WordPressにアップロードする画像は「JPEG1000×500PX」ぐらいがオススメです。(PNGばかり使うと重たくなるので要注意)

 

うた
他にも表示速度をあげるプラグインはあるので参考にしてください。

 

 

今回は以上になります。おつかれさまでした。

 

-WordPress, WordPressプラグイン, WordPress初期設定
-, , ,