WEBサービス・アプリ

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などが普及すればこんな作業も必要なくなるのかもしれません。

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

YouTube始めました!

POSTED COMMENT

  1. アバター 匿名 より:

    個別に最適化はどこをやれば出てくるんでしょうか?

    • Fumisuke Fumisuke より:

      >匿名さん
      「既存ファイルは一括最適化での変換は不可!手動での最適化が必須」にある通りにはなりますが

      メディア>一括最適化>再最適化ボタン

      で個別に最適化できます。

      つまり一つ一つ「再最適化ボタン」を押すことが個別に最適化ということになります。
      (分かりづらくすいません)

  2. アバター 村上 より:

    すみません!この症状と全く同じで私も「 一括最適化」ができませんでした。Fumisukeさんはその後どのようにWebp化されましたでしょうか?

    新規画像は最適化されWebpになります。しかし、過去画像が1万くらいあるので手動では無理な状況です。

    EWWW Image Optimizer⇒ WebP⇒ JS WebP Rewritingのチェックを付けたり、しばらく前にダウンロードしたプラグインの「a3 Lazy Load」を停止させても駄目でした。

    ネットで書かれてあることはすべて行ってみましたが前に進みません。これ以上どうしようもなくコメントに書かせて頂きました。テーマは賢威8を使っています。

    一括最適化を行うと画像検出が1つだけ毎回出てくるようです。もしよろしければお力をお貸し願いたいです。どうぞよろしくお願い致します。

    WebPは緑色になっているので「.htaccess」に問題はないと思います。もう3日も同じことしています。。。

    • Fumisuke Fumisuke より:

      結論から言うと正直なところ私も過去画像の一括最適化は出来ませんでした。
      おっしゃる通り、私もネットで書かれていることは一通り試しましたがやはり出来ませんでした。
      そのため全て手動で画像を最適化するという苦行を実施いたしました…私は幸い画像は1000枚程度だったと思うので何とかなりましたが…。
      これはもうそういうバグ何じゃないかと思っています。お力になれず申し訳ないです。

  3. アバター 村上 より:

    Fumisukeさん

    ご回答ありがとうございます。何とかこの件は自分で解決することができました。そこで新しい質問を受け付けて頂けませんでしょうか?

    本当にすみません。

    実はFumisukeさんも行っている「webp」ですが、プラグインは何を使っていますか?「EWWW Image Optimizer」で間違いないでしょうか?

    実はEWWW Image Optimizerで「webp」はできますが、遅延読み込み設定をEWWW Image Optimizerで設定すると、「webp」が解除されてしまいます。理由が全くわかりません。

    「a3 Lazy Load」を使って遅延読み込みをさせると、「webp」になったりならなかったりします。そこで「a3 Lazy Load」を削除してEWWW Image Optimizerだけで、「webp」と「遅延読み込み」をしていましたがどうやら「webp」が解かれてJPGやPGNに戻ってしまいます。

    「a3 Lazy Load」と「EWWW Image Optimizer」は組合せが悪いことはわかりましたが、Fumisukeさんはどのように対応されていますでしょうか?

    続けての質問すみません。解決できなく悩みがつきません。

COMMENT

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)