WordPress プラグイン ブログを始める

【画像圧縮】EWWW Image Optimizerの設定方法【2021/5月更新】

悩んでいる人
サイトが全然表示されない…画像の読み込みが遅い気がする

そんな疑問にお答えします。

サイトの表示スピードが遅い原因のひとつに、アップロードした画像ファイルが大きいことが挙げられます。

サイトが表示されなければ、ユーザが離脱してしまいますし、SEOの点でも評価が下がってしまいます。

ですが、サムネイルや図解の説明など、コンテンツを作る上で画像は欠かせないので、省くことはできません。

そこで、そんなお悩みを解決してくれるのが、今回紹介するプラグイン「EWWW Image Optimizer」です。

「EWWW Image Optimizer」は、自動で画像サイズを圧縮し、サイトの表示スピードを改善することができます。

それでは、設定方法や使い方の紹介をしていきます。

\当サイト使用WordPressテーマ/
サンプル
AFFINGER6

EWWW Image Optimizerとは

「EWWW Image Optimizer」とは、画像サイズを圧縮してくれるプラグインです。

インストールすることで、WordPressにアップロードする画像を自動で圧縮してくれます。

トド

インストールするだけで、あとは勝手に圧縮してくれるので、手間が一切かかりません。

また、すでにアップロードされている画像も一括で圧縮してくれる点も魅力的です。

画像一つ一つのサイズを小さくすることで、サイトの表示スピードが上がり、ユーザの離脱を防ぐことができます。

EWWW Image Optimizerの設定方法

それでは、プラグイン「EWWW Image Optimizer」の設定方法をご紹介します。

設定手順

  • EWWW Image Optimizerをインストール・有効化する
  • EWWW Image Optimizerの初期設定
  • WebPの配信方法の設定
  • 変換リンクを非表示にする

この4つの手順で設定することができます。

EWWW Image Optimizerをインストール・有効化する

まずはじめに、プラグインをインストールしていきます。

WordPress管理画面から

プラグイン > 新規追加

をクリックします。

右上の検索ボックスで「EWWW Image Optimizer」と入力します。

該当するプラグインを見つけたら、「今すぐインストール」をクリックします。

※似たようなプラグインに「EWWW Image Optimizer Cloud」がありますが、こちらはインストールしないように注意しましょう。

ココに注意

「EWWW Image Optimizer Cloud」は、「EWWW Image Optimizer」と開発元は同じで、画像圧縮できるプラグインです。サーバーへかかる負荷が少ない特徴がありますが、画像圧縮に要する時間が「EWWW Image Optimizer」より長いデメリットもあります。また、管理画面が全て英語表記なので、日本語表記で扱いやすい「EWWW Image Optimizer」を選ぶと良いでしょう。

インストールが終了したら、「有効化」をクリックします。

EWWW Image Optimizerの初期設定

続いて、「EWWW Image Optimizer」の初期設定をしていきます。

設定 > EWWW Image Optimizer

をクリックします。

こちらの画面では、

「サイトを高速化」「今は無料モードのままにする」

にチェックをつけ、「次へ」クリック。

続いて表示される画面では、初期設定のままでOKです。

「設定を保存」をクリックします。

これで、初期設定は完了です。

「完了」をクリックしましょう。

WebPの配信方法の設定

こちらが「EWWW Image Optimizer」の管理画面です。

基本的に初期設定のままでOKです。

その中で「WebPの配信方法」の項目があります。

WebP(ウェッピー)とは、「次世代画像フォーマット」のことで、Googleが開発している静止画のフォーマットのことです。

ポイント

WebP(ウェッピー)は、これまで主流であった「JPEG」や「PNG」よりもファイルサイズを小さいため、サイドスピードを上げることができます。

また、今までWebP(ウェッピー)形式の画像が対応しているブラウザが少なかったのですが、

今では、「Internet Explorer(IE)」以外のブラウザ「Google Chrome」、「Firefox」、「Edge」、「Safari」でWebP(ウェッピー)形式の画像が対応しているため、こちらの設定は必ず行いましょう。

WebP(ウェッピー)形式対応ブラウザ

  • Google Chrome
  • Firefox
  • Edge
  • Safari

それでは、設定方法です。

下記のコードを.htaccessに追加する形となります。

.htaccessを編集するには、レンタルサーバの管理画面に行く必要があります。

なので、今回は「ConoHa WING(コノハウイング)」と「Xserver(エックスサーバー)」の2つの設定方法をお伝えします。

ConoHa WING(コノハウイング)で「.htaccess」に追加する場合

「ConoHa WING(コノハウイング)」の管理画面へ移動します。

>> 「ConoHa WING(コノハウイング)」の管理画面へアクセスする

ログイン後、「サイト管理」をクリックします。

サイト設定 > 応用設定

をクリックします。

「.htaccess設定」をクリックします。

「編集」をクリックします。

こちらに先ほどのコピーしたコードを貼り付け、保存します。

注意ポイント

コピーしたコードをそのまま貼り付けましょう。一語でも抜けているとエラーになり、サイトが見れなくなる可能性があります。

これで、「.htaccess」の設定は完了です。

再び、WordPressの「EWWW Image Optimizer」の管理画面へ戻り、「変更を保存」をクリックします。

「PNG」と書かれた枠が赤色から緑色に変わると、無事設定が完了です。

Xserver(エックスサーバー)で「.htaccess」に追加する場合

続いて、「Xserver(エックスサーバー)」での設定です。

こちらも同様、管理画面へ移動します。

>> 「Xserver(エックスサーバー)」の管理画面へアクセスする

管理画面へログインしたら、「.htaccess編集」をクリックします。

該当するドメインを選択します。

続いて、「.htaccess編集」をクリックし、タブを切り替えます。

こちらも同様、先程コピーしたコードを貼り付けます。

注意ポイント

コピーしたコードをそのまま貼り付けましょう。一語でも抜けているとエラーになり、サイトが見れなくなる可能性があります。

コードを貼り付けたら、「確認画面へ進む」をクリックします。

確認画面に移動するので、問題なければ、「実行する」をクリックして完了です。

「PNG」と書かれた枠が赤色から緑色に変わると、無事設定が完了です。

変換リンクを非表示にする

「EWWW Image Optimizer」の管理画面にある「Enable Ludicrous Mode」をクリックします。

すると、詳細設定ができるモードに切り替わります。

続いて「変換」タブをクリックします。

「変換リンクを非表示」にチェックをつけ、保存しましょう。

「変換リンクを非表示」の設定をすることで、「jpg」→「png」のように勝手に拡張子が変換されるのを防ぎます。

拡張子が変換されると、画質が低下する恐れがあるので、必ず設定しましょう。

EWWW Image Optimizerの使い方

それでは、初期設定が完了したので、実際に画像を圧縮していきます。

「EWWW Image Optimizer」をインストールした段階で、これからアップロードする画像は自動で圧縮してくれます。

ですので、すでにアップロードしている画像を圧縮していきます。

このプラグインの便利な点は、一括で圧縮してくれます。

EWWW Image Optimizerで一括最適化(圧縮)する

メディア > 一括最適化

をクリックします。

「最適化されていない画像をスキャンする」をクリックします。

すると、最適化(圧縮)されていない画像数が出てきます。

「●●点の画像を最適化」をクリックします。

これで、自動で圧縮してくれるので、終わるまで待ちます。

注意ポイント

画像数が多いと圧縮が終わるまでに時間がかかるため、時間があるときに作業しましょう。

全ての最適化が終われば、作業完了です。

新規アップロードする画像は自動で最適化

「EWWW Image Optimizer」インストール後にアップロードした画像が自動で圧縮されます。

それでは、実際に「アップロードした画像が自動で圧縮されるのか」見ていきましょう。

画像ファイルをアップロードしていきます。

ひとつ画像ファイルを選択します。

すると、このように自動で圧縮されました。

トド

はじめに一括最適化しておけば、あとは勝手に画像圧縮してくれるので、自分で圧縮する必要はありません。

画像圧縮でサイトの表示スピードはどのように変わる?

最後に、「EWWW Image Optimizer」インストール前後でサイトの表示スピードにどのような変化があるのか見ていきます。

今回、サイト表示スピードを計測するツールは、「PageSpeed Insights(ページスピードインサイト)」です。

「PageSpeed Insights(ページスピードインサイト)」は、計測したいページのURLを入力すると、自動で分析してくれるツールです。

SEOやWordPressの本でも必ず紹介されているほど、便利なツールとなります。

それでは、「EWWW Image Optimizer」導入前後でどのような変化があったのか見ていきます。

画像圧縮する前後でのPCの評価

それでは、PCの評価です。

画像数の多いこちらのページを対象に評価しています。

PCの評価

「適切な画像のサイズ」「次世代フォーマットでの画像の配信」の画像の項目が圧縮後に消えました。圧縮したことで、画像に関する改善がされたことになります。

画像圧縮する前後でのスマートフォンの評価

それでは、スマートフォンの評価です。

スマートフォンの評価

スマートフォンも同様に、「適切な画像のサイズ」「次世代フォーマットでの画像の配信」の画像の項目が圧縮後に消えました。圧縮したことで、画像に関する改善がされたことになります。

トド

PC、スマホともに、インストールするだけでサイトスピードが改善されました。

まとめ サイトスピードを上げて、ユーザの離脱を防ぐ対策をしましょう。

今回は、「EWWW Image Optimizer」の設定方法をご紹介しました。

インストールするだけで、自動で画像サイズを圧縮し、サイトの表示スピードを改善することができます。

サイトの表示スピードが上がれば、ユーザの離脱を防げ、SEOの評価も上がります。

まだの方は、この機会に導入してみてはいかがでしょうか。

本日は、以上です。

↓ 他のプラグインはこちら

-WordPress, プラグイン, ブログを始める
-, , , , , ,