EWWW Image OptimizerでWebP変換ができない原因と解決方法を解説

これまでずっとページの表示速度対策をしていなかったので重い腰を上げて取り組み始めました。

今回は定番の無料プラグイン「EWWW Image Optimizer」でJPG・PNG画像ファイルのWebP化を実行したのですが、正しい順序で正しい操作をしてもうまく動作してくれませんでした。

いろんなサイトを検索して調べても解決法が見つからなかったのですが、試行錯誤の末になんとか原因と対策が分かりました。

そこで今回はWordPressでプラグイン「EWWW Image Optimizer」を使った画像ファイルのWebP変換において、うまくいかない場合の原因と解決方法を解説します。

EWWW Image OptimizerでのWebp化とは？

EWWW Image Optimizerとは画像ファイルをアップロードした際に画像サイズを軽量化したりExif情報を消してくれるWordPressのプラグインです。

特に最近はスマホ等のカメラ性能が向上して画像サイズも大きくなる傾向にあります。その一方で閲覧者のことを考えるとWEB上に掲載する画像サイズは小さい方が好ましいです。

そのための対策の一つが「次世代フォーマットでの画像の配信」です。

次世代フォーマットとはJPEG2000やWebPなどの新しい画像形式で、ぱっと見では見た目をほぼ変えずに画像サイズを圧縮できます。

同プラグインではすでにアップロードした既存のPNGやJPGファイルをWebP形式へと変換することが可能です。

正しい順序で設定してもWebP変換されない！

私の場合はあらゆるサイトを読んでその通りに設定を進めてもWebP変換ができませんでした。

設定は成功してプラグイン上ではWebP変換ができたという表示にはなるのに、自分のサイトを確認しても画像がWebPに変換されてないのです。

原因がテーマとの相性なのか、プラグインとの相性なのかは不明です。

私のWordPress環境はWordPressのバージョンは最新、サーバーは「Mixhost」、テーマは「JIN」を使用しています。

私だけの環境で起こった問題なのかもしれませんが検索しても解決方法が見つからなかったため、同じように困っている人の役に立てばと思い記事を書きました。

EWWW Image OptimizerでWebP変換設定

EWWW Image Optimizerのインストール

まずはプラグインをインストールします。

コチラからインストールできますし、検索しても普通に出てきます。

インストールしたら有効化も忘れずにしましょう。

プラグインでのWebP変換設定

プラグインの設定ページに「WebP」というタブがあります。

そのタブに「JPG,PNGからWebP」というチェック項目があるのでチェックを入れて変更を保存ボタンを押します。

すると下の方に「リライトルールを挿入する」ボタンが出てきます。

これは「.htaccess」に対応ブラウザ・非対応ブラウザのそれぞれでアクセスした場合のルール設定です。

WebP対応ブラウザ（ChromeやFirefox等）ならWebPを表示し、WebP非対応ブラウザ（IEやiPhoneのSafari等）なら既存のPNG・JPGを表示するという大変重要な設定です。

このボタンは押しても効かず手動で設定する必要があるケースもあるそうですが、私の場合は普通に動作してくれました。

.htaccessの編集はリスクもあるので念の為にバックアップを取ってから実行しましょう。

緑ランプでWebPが動作しているか確認

WebP化が設定できていない場合には上記画像のように右下にPNGと書かれた赤ランプが点灯しています。

しかしここまでの設定が終われば緑ランプでWebPの文字へと変わります。

私はまずここでちゃんと設定したのに緑ランプに切り替わらなかったのですが、原因はブラウザのキャッシュにありました。

Chromeだったら「メニューボタン＞その他のツール＞閲覧履歴の消去＞キャッシュされた画像とファイル」からキャッシュデータを削除することができます。

キャッシュデータを削除してリロードしたらWebPの緑ランプへと変わりました。

既存ファイルは一括最適化での変換は不可！手動での最適化が必須

ここからが問題でした。

EWWW Image Optimizerには「一括最適化」という機能があり、本来であればワンクリックで既存の画像を最適化（つまりWebP変換）ができるはずです。

しかし一括最適化をした画像をメディアのライブラリから確認するとWebPには変換されていませんでした。

そしてふと、手動で個別に「再最適化」ボタンを押してみました。

すると手動で最適化をした画像だけはWebPへの変換に成功しているという事象を確認しました。

ちなみにブログ上で見るだけでは拡張子が同じpngファイルなので判別できない場合があります。

ちゃんとブログ上でWebP画像になっているかの確認方法はChromeなら「F12キー＞Network＞Img」でTypeの欄を見ることで判別できます。

また新たにアップロードした画像についてはこの手順を踏まなくても自動でWebP変換されていました。

つまり過去にアップロードしてきた画像は、面倒ですが一つ一つ手動で再最適化をしなくてはならないということです。

なぜこのような事象が起きたのかは不明ですが、変換できない理由は「一括最適化でWebP変換ができなかったから」ということでした。

画像のWebP変換による画像サイズの削減効果

こんな面倒なことをしてまで本当に画像サイズを削減して高速表示につながるのか？

一例として私のブログでの削減効果を紹介します。

PNG 157KB → WebP 106KB（32％）
PNG 483KB → WebP 363KB（25％）
PNG 241KB → WebP 164KB（32％）
PNG 44KB → WebP 43KB（3％）
JPG 17KB → WebP 4KB（77％）
JPG 194KB → WebP 35KB（82％）
JPG 214KB → WebP 51KB（77％）
JPG 114KB → WebP 11KB（91％）

ファイルによって削減率は異なりますがPNGは30％、JPEGは80％程度の削減率となりました。

実際にこうして比較するとJPEG画像の方が圧倒的に画像サイズが圧縮できてますね。

携帯電話の5Gなどが普及すればこんな作業も必要なくなるのかもしれません。

しかし「ギガが減る」なんて単語が流行る現在では、見てくれる人のために画像サイズの節約を頑張りたいと思います。