「EWWW Image Optimizer」の使い方|WebP画像に対応して高速化する応用設定も解説
![webp対応 EWWW](https://jinr.jp/manual/wp-content/uploads/2022/12/アートボード-2.png)
こんにちは!WordPressテーマ『JIN:R』開発のひつじです。
今回は画像データ量を軽減してくれる優秀プラグイン
「EWWW Image Optimizer」
の使い方について、基本設定から応用設定まで含めて解説をしていきます!
![ひつじくん](https://jinr.jp/manual/wp-content/uploads/2022/07/hituji-150x150-1.jpg)
サイトの高速化には、やはり「画像の最適化」が付き物ですね。
ぶっちゃけ「Webサイトが重くなる原因の7割が画像」といっても過言ではないと思っています。
そんな画像たちを一括で最適化してくれる「EWWW Image Optimizer」の使い方をこれから見ていきましょうか
EWWW Image Optimizerの導入
プラグイン > 新規追加へ
WordPress管理画面に入って「プラグイン」>「新規追加」に進みましょう。
![プラグイン新規追加](https://jinr.jp/manual/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-15.43.20.png)
EWWW Image Optimizerを見つける
プラグイン検索窓に「EWWW」と打ち込みましょう。そうするとプラグインが見つかるので「今すぐインストール」のボタンを押します。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-03-21.15.14.png)
インストールが終わったら「有効化」のボタンを押しておきましょう。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-03-21.15.40-1024x596.png)
これでプラグインの入手が完了です!
初期設定を完了させる
「プラグイン」の一覧に進むと「EWWW Image Optimizer」が追加されているのが確認できます。
ここで「設定」のリンクをクリックして進みます。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-03-21.19.16-1024x384.png)
そうすると、こういった初期設定の画面になります。
画像のように設定して進みましょう
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-03-21.21.03.png)
そうするとこの画面になるので「完了」を押します
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-03-21.21.58-1.png)
そうすると、この画面に移動します。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-03-21.24.46.png)
これでいったん初期設定が完了!
ちなみに、まだ画像の最適化は全くできていない段階です。
最適化に関しては次のステップで行っていきましょう。
EWWWのインストール完了!
ここから画像を圧縮して高速化をしていきましょう
![ひつじくん](https://jinr.jp/manual/wp-content/uploads/2022/07/hituji-150x150-1.jpg)
EWWW Image Optimizerで画像を一括圧縮する
EWWWの管理画面右上に「一括最適化」のリンクがあります。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-11.58.24-1.png)
これをクリックして進みましょう
では、一括最適化をしていきましょう。
やり方はとっても簡単で「最適化されていない画像をスキャンする」をクリック
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-11.58.39.png)
すると、最適化できる画像の件数が表示されるので「最適化」のボタンを押しましょう。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-11.59.17.png)
やることはたったこれだけです!
あとは自動で最適化が進んでいくので、終わるのを待っておきましょう!
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.00.05.png)
すべての項目が完了すると、画像の圧縮は終わりです!
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.12.22.png)
画像最適化には結構時間がかかるので、作業の休憩中に自動で進められるようにするのがおすすめです。
ここまででだいぶ速くできましたが、もっと高速化したい人は「WebP対応」もやってしまうことを推奨します。
どうやるのかは次で説明しますね
![ひつじくん](https://jinr.jp/manual/wp-content/uploads/2022/07/hituji-150x150-1.jpg)
WebPに対応する
WebPという拡張子に対応すると、画像をさらに軽量化することができます!
少し専門的な処理が入りますが、マニュアル通りにやれば誰でもできるので大丈夫です。
レンタルサーバー(例:ConoHa WING・XSERVER)ではやり方も少し違いますので、どちらも解説をさせていただきます。
ちょっと長いですがお付き合いください↓
![ひつじくん](https://jinr.jp/manual/wp-content/uploads/2022/07/hituji-150x150-1.jpg)
ConoHa Wingをお使いの場合
EWWWの管理画面に、「WebP変換」という項目があるのでチェックが入っていることを確認します。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.51.07.png)
WebP変換にチェックが入っていると、このように「WebP配信方法」と書かれた画面が出ています。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.50.38.png)
次はConoHaの管理画面に入って「サイト管理」>「高速化」>「WEXAL」に進み「ON」にしましょう。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.43.46.png)
このWEXALをONにすると、ボタン1つであらゆる高速化が可能になります。
ONにしておくと「WebP」に対応する準備もできるので一石二鳥で設定が進みます。
EWWWの管理画面に戻って、「リライトルールを挿入する」のボタンを押しましょう
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.50.38-1.png)
すると
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.28.18.png)
「WebPルールが正常に検出されました」の表示を確認できます。
これでWebP画像を配信する準備は整いました。
あとはサイト内にある画像をWebPに置き換えていきます。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-11.58.24-1.png)
「WebPのみ」にチェックを入れた上で「最適化されていない画像をスキャンする」を押しましょう。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-11.58.39-1.png)
あとはスキャンした画像が自動でWebPに変換されていくので、一括最適化完了までゆっくりと待つことにしましょう。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.12.22.png)
XSERVERの場合
EWWWの管理画面に、「WebP変換」という項目があるのでチェックが入っていることを確認します。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.51.07.png)
WebP変換にチェックが入っていると、このように「WebP配信方法」と書かれた画面が出ています。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.50.38.png)
次はXSERVERの管理画面に入って「XPageSpeed設定」>「対象ドメインを選択して」>「画像最適化」に進み「ON」にしましょう。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-13.04.26-1024x659.png)
ONにしておくと「WebP」に対応するコードが挿入されます。(他の項目は必要に応じてONにしてもらえるといいでしょう。)
EWWWの管理画面に戻って、「リライトルールを挿入する」のボタンを押しましょう
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.50.38-1.png)
すると
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-13.10.04.png)
「WebP」の表示を確認できます。(メッセージが出ていますが問題はありません。)
これでWebP画像を配信する準備は整いました。
あとはサイト内にある画像をWebPに置き換えていきます。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-11.58.24-1.png)
「WebPのみ」にチェックを入れた上で「最適化されていない画像をスキャンする」を押しましょう。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-11.58.39-1.png)
あとはスキャンした画像が自動でWebPに変換されていくので、一括最適化完了までゆっくりと待つことにしましょう。
![](https://jinr.jp/manual/wp-content/uploads/2022/12/スクリーンショット-2022-12-05-12.12.22.png)
こういった手順でWebP対応の画像最適化も完了しました!
割と簡単にできるので、ぜひ皆さんも時間ある時にやってみてください。
![ひつじくん](https://jinr.jp/manual/wp-content/uploads/2022/07/hituji-150x150-1.jpg)