- 画像を自動でWebP化する方法
- EWWW Image Optimizerの役割とメリット
- 具体的な設定方法とよくあるエラーの原因と対処法
サイトの表示速度を少しでも速くしたいなら、画像の最適化は必須です。
なかでもEWWW Image Optimizer（EWWWIO）は、画像を自動で軽量化し、さらにWebP形式に変換してくれる便利なプラグインです。
この記事では、実際に使って感じたメリットや設定方法、つまずきやすいエラーの対処方法まで、初心者でも迷わず設定できるようにまとめました。
EWWW Image Optimizerの導入を迷っている方の参考になると嬉しいです。
EWWW Image Optimizerとは
EWWW Image Optimizerとは、WordPressにアップロードした画像を自動で圧縮したり、WebPへ変換し軽量にてくれるプラグインです。
画像を軽量化することで、サイトの表示速度が早くなったりとSEO対策に役立ちます。
| メリット | デメリット |
|---|---|
| WebPへの変換 画像の最適化（圧縮） メタデータの削除 枚数制限なし 一括自動で最適化 | サーバーに負担がかかる 圧縮率はほどほど 1枚ずつ細かく調整できない |
メタデータの削除では、ファイルに記録された撮影場所・撮影時間・使用機種などのデータを削除してくれます。
少しだけデータが軽くなることに加えて、セキュリティ面でも安心できる嬉しい機能です。
画像のリサイズ機能もありますが、EWWW Image Optimizerで使用するのはあまりおすすめしません。
画像はできるだけ、作成時点で適切なサイズに調整しておくようにしましょう。
代用できるプラグインやツールは？
他にも画像圧縮やWebP化ができるツールを知っておきたいという方に向けて、初心者でも使いやすいものをいくつか紹介します。
| プラグイン | Converter for Media |
|---|---|
| WP-Optimize |
| ウェブツール | Squoosh |
|---|---|
| TinyPNG |
これらについては、以下の記事でも詳しく解説しています。
気になる方は参考にしてみてください。
私自身これらのツールをすべて試しましたが、以下のような点が便利でEWWW Image Optimizerを使用しています。
- WordPressにアップロードするだけで自動処理できる
- 複数画像をまとめて最適化できる
- メタデータの削除ができる
一枚ずつ手動で調整したい方には他ツールも向いていますが、作業を効率化したい方にはEWWWがおすすめです。
EWWW Image Optimizerの設定方法
ここからは、EWWW Image Optimizerの設定方法について解説していきます。
EWWW Image Optimizerのインストール
WordPressにEWWW Image Optimizerのプラグインを追加し、［有効化］します。
プラグインの［設定］をクリックしましょう。
EWWW Image Optimizerの初期設定
［設定］をクリックすると以下のような画面が出てきますが、右下の［二度と表示しない］をクリックし、この後、手動で選択していくことをおすすめします。
もしこの画面から設定する場合は、以下の内容で設定するのがおすすめです。
① モードの変更
画面が表示されますが、初期ではタブ数が少ない「簡易モード」になっています。
［ルディクロスモード］をクリックします。
ルディクロスモードになったら項目タブが増えるので、こちらから初期設定を行なっていきましょう。
②【重要】必須タブ
ここは必ず設定しておきたい項目です、以下の設定を行なってきましょう。
- 設定 ① メタデータを削除
-
チェックが入っていることを確認しましょう。
- 設定 ② Max Image Dimensions
-
幅と高さの上限を［0］に設定し、アップロード時の自動リサイズを無効にします。
- 設定 ③ 遅延読み込み
-
SWELLなどのWordPressテーマで「Lazy Load（遅延読み込み）」機能をすでに使用している場合は、こちらはチェックを外してオフにしておきます。
テーマや他のプラグインと機能が重複しないように注意してください。同じ機能を複数有効にすると、不具合の原因になることがあります。
- 設定 ④ WebP変換
-
- チェックを入れて有効にします。
- ［リライトルールを挿入する］をクリックします。
- 下図のように「WebPルールが正常に検出されました」と表示され、「PNG（赤）」のマークが「WEBP（緑）」になったら完了です。
「このサイトには mod_headers が抜けているようです。この Apache モジュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください。
WebP ルールは検証されましたが、セルフテストは失敗しました：PNG の応答が MINEタイプ のテストに失敗しました」
このようなエラーが出てしまう場合があります。
その場合は、のちほど解説する「リライトルールのエラーが出た時の対処法」を参考にしてみてください。
設定が完了したら、忘れずに［変更を保存］をクリックしましょう。
次に、変換タブの設定を行います。
こちらは任意の設定になりますので、必須ではありません。
③【任意】変換タブ
- 設定 変換リンクを非表示
-
メディアライブラリに表示される「手動変換リンク（JPEG↔︎PNG）」を表示しないための設定です。
個人ブログの場合はチェックは任意ですが、誤操作を防ぎたい場合はチェックをいれましょう。- チェックをしない場合
- チェックを入れた場合
変更したら、最後に［変更を保存］をクリックします。
EWWW Image Optimizerの一括最適化
EWWW Image Optimizerは、設定後にアップロードした画像を自動で最適化してくれます。
ただし、設定前にアップロードしていた画像は自動で最適化されないため、「一括最適化」の処理を行なっておきましょう。この処理を行なっておきましょう。
また、設定後であっても一部の画像が最適化されていない場合があるため、その場合もこの方法で一括最適化を行うことができます。
WordPressの左メニュー「メディア ＞ 一括最適化」から［最適化されていない画像をスキャンする］をクリックします。
［◯点の画像を最適化］をクリックします。
「メディア ＞ ライブラリ」を確認し、画像最適化でWebPになっているか確認しましょう。
以上で、EWWW Image Optimizerの基本的な設定は完了です。
リライトルールのエラーが出た時の対処法（エックスサーバー）
このサイトには mod_headers が抜けているようです。この Apache モジュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください。
WebP ルールは検証されましたが、セルフテストは失敗しました：PNG の応答が MINEタイプ のテストに失敗しました
主に、エックスサーバー利用者によくあるエラー表示です。
原因としては、エックスサーバー独自の高速化機能「Xアクセラレータ」の影響により、正しく設定されていていてもエラーとして判定してしまうケースがあります。
実際には問題なくWebP化されていることも多く、誤検出である可能性があります。
以下の手順で、正常に動作しているか確認してみましょう。
【EWWWIO】動作確認の手順
- リライトルールがサーバーの.htaccessに正しく記述されているか確認
- Chromeブラウザで画像がWebP形式になっているか確認
1．リライトルールがサーバーの.htaccessに正しく記述されているか確認
まずは、エックスサーバーの管理画面から、リライトルールが.htaccessに正しく記述されているか確認をします。
.htaccessを誤った記述をしてしまうと、画面が真っ白になったりサイトがうまく機能しなくなるため、慎重に作業を行なってください。
エックスサーバーのサーバー管理画面から、「ホームページ ＞ .htaccess編集」をクリックします。
.htaccessの編集画面が表示されたら、対象のサイトドメインの編集項目「鉛筆マーク」をクリックします。
上図のようなポップアップが表示されるので、［］か［閉じる］をクリックします。
.htaccessの中にEWWW Image Optimizerのリライトルールが書かれてあることを確認します。
リライトルールが記述されていれば問題ありません。
［キャンセル］をクリックし画面を閉じましょう。
リライトルールの記述がされていない場合は、EWWW Image Optimizerからリライトルールをコピーして、該当の場所に貼り付けます。
.htaccessは上から順番に処理されるため、記述する位置によって優先順位の動作が変わります。
WebP変換を優先的に処理させたい場合は、一番上（先頭）に記載します。
一方で、他のリライトルールとの競合を避けたい場合は、上図のように「#END WordPress」の後に記載すると既存設定に影響を与えにくくなります。
WebPがうまく適用されない場合や、表示速度に違和感がある場合は、記述位置を先頭に変更して動作を確認してみましょう。
2．Chromeブラウザで画像がWebP形式になっているか確認
Chromeのブラウザから、画像がWebP形式になっているか確認してみます。
Chromeのブラウザ「表示 ＞ 開発 / 管理 ＞ デベロッパーツール」をクリックします。
［Network］をクリックし、記事に挿入した画像Typeが［webp］になっているか確認します。
WebPになっていれば、問題ありません。
以上が確認できれば、実際には問題なくWebP化されています。
私の場合、設定直後は該当のエラーが表示されていましたが、画像は問題なくWebP化されていました。さらに後日確認したところ、EWWW Image Optimizerのリライトルールのエラーも解消され、「WEBP（緑）」と表示されるようになっていました。
最終手段！JS WebPリライトを使用する場合
それでもWebPにならない場合は、JavaScriptを使ってブラウザ側で画像をWebPに書き換える「JS WebPリライト」を選択しましょう。
基本的に、.htaccessへのリライトルールの挿入か、JS Web リライトのどちらか一方でWebP化は可能です。
確実に、WebPにしたい場合は両方設定する場合もありますが、サイト表示速度を優先するなら、以下の順番で検討するのがおすすめです。
- １．リライトルールの挿入（.htaccessに設定）
-
サーバー側で処理するため、最も高速で安定した方法です。
- ２．JS Web Pリライト
-
JavaScriptを使って画像をWebPに変換します。.htaccessが使えない環境や、リライトルールが正常に動作しない場合の代替手段として有効です。
- ３．【非推奨】リライトルールの挿入＋JS Web Pリライト
-
処理は二重になりますが、表示の取りこぼしを防げます。エラーになった時にどちらに問題があるのか原因の切り分けが把握しづらいというデメリットがあります。
EWWW IOのSWELLと相性は？実際に使ってみた結果
ネット上では、「SWELLとEWWW Image Optimizerは相性が悪く、エラーが発生することがある」といった情報も見かけます。
実際に、SWELLの公式でも以下のように案内されています。
EWWW Image Optimizer
引用元：推奨プラグインと非推奨・不要・注意すべきプラグインについて｜SWELL公式ページ
これらのプラグインによって画像がアップロードできなくなる不具合が起きている場面に何度か遭遇しています。
常時有効化していることで問題になるので、必要な時だけONにして画像圧縮に使う、という使い方は問題なくできるかと思います。
そのため、私も最初は他のプラグインを使ったり、必要なときだけONにする運用をしていました。
しかし、運用が手間に感じたため、EWWW Image Optimizerを常時有効化して使ってみることにしました。
その結果、1枚だけWebP化されていない画像が発生したことはありましたが、それ以外は現在もとくに問題なく使用できています。
まとめ
この記事では、画像の最適化やWebP化を自動で行える便利なプラグイン「EWWW Image Optimizer」を紹介しました。
- WebPに変換できる
- メタデータの削除ができる
- 無料でも枚数制限なし
- 一括かつ自動で最適化できる
これらはサイト表示速度の改善にもつながるため、WordPressブログを運営するうえでEWWW Image Optimizerを導入する価値は十分あるといえます。
環境によってはエラーが表示されることがありますが、実際にWebP化されていれば問題ないため落ち着いて確認しましょう。
また、SWELLとの相性についても一部で不具合の報告はありますが、SWELL / EWWW Image Optimizerともに使用しているこのサイトでは、現状問題なく使用できています。
