EWWW Image OptimizerでWebP配信する方法

EWWW Image OptimizerでWebP配信する方法

EWWW Image OptimizerでWebP(ウェッピー)配信する方法をまとめておきます。

目次

EWWW Image Optimizerの特徴

先にEWWW Image OptimizerでWebP配信する時の特徴をまとめておくとこんな感じです。

特徴
  1. 対応ブラウザでは自動でWebP配信してくれる
  2. WebPファイルのクオリティ(初期値75)を50-100で指定できる
  3. 既存の画像から一括でWebPファイルを作成できる
  4. 設定後は画像アップロード時に自動でWebPファイルが作成される
  5. 元の画像はそのまま残っているのでいつでもWebP配信を停止できる
  6. 作成したWebPファイルを一括削除することができる

プラグインの設定画面でチェックを入れて、.htaccessファイルにコードをコピペするだけで機能します。

設定完了後は、対応ブラウザではWebP配信、非対応ブラウザでは従来通りjpgやpngで配信してくれます。また、既にアップロード済みの画像を一括でWebPファイルに変換することもできます。

元のjpgやpngファイルは保持されているので、いつでもWebP配信を停止できるのも特徴です。

個人的には、PageSpeed Insightsのスコアを改善したい方におすすめの機能です。

EWWW Image Optimizerの設定

EWWW Image Optimizerの設定画面を開いて、基本タブの「WebP変換」にチェックを入れます。

WebP変換にチェックを入れる

WebPの配信方法に表示されたコードをコピーします。

この際、「リライトルールを挿入する」ボタンをクリックすると、.htaccessの末尾にコードが自動挿入されますが、サーバーの高速化機能とバッティングしてエラーが表示される可能性があるので(WebP変換はできている)、できるだけご自身で.htaccessを編集する方法をおすすめします。

エックスサーバーの場合は、「Xアクセラレータ」が有効になっているとエラーが表示されるので、画面の表示がおかしくなった時は、.htaccessを開いて「# BEGIN EWWWIO~# END EWWWIO」までを削除して下さい。また、一度プラグインを削除することでも自動挿入されたコードは削除されます。

WebPの配信方法

コピーしたコードを.htaccessファイルに追記します。

僕は末尾に追記しても特に問題はなかったのですが、上手く機能しない時は冒頭に追記してみて下さい。

.htaccess編集方法 | エックスサーバー

.htaccessにコードを挿入

プラグイン管理画面の「変更を保存」をクリックして、ロゴがPNGからWEBPに変更されたら設定完了です。

WebP配信方法が変更

エックスサーバーの「Xアクセラレータ」が有効になっていると下記のエラーが表示されますが、特に問題なく機能します(サーバーのキャッシュとXアクセラレータをOFFすればエラー表示は消える)。

このサイトには mod_headers が抜けているようです。この Apache モジュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください。

WebPのクオリティを変更する

プラグイン管理画面の「Enable Ludicrous Mode」をクリックします。

Enable Ludicrous Mode

拡張されたタブの「高度な設定」を開いて、「WebP品質」に数値(50-100)を入力して作成されるWebPファイルのクオリティを変更することができます。初期値(未入力)は75に設定されています。

また、「Sharpen Images」にチェックを入れるとシャープ処理が追加されます。

WebP品質

参考までに、いくつか比較画像を用意してみました(雲や窓を比較すると分かりやすいかも)。

下記はjpg品質100とWebP品質75の比較です。

WebP品質75
WebP品質75
WebP品質75
jpg品質100
jpg品質100
555kb サイズ 107kb

下記はjpg品質100とWebP品質100の比較です。

WebP品質100
WebP品質100
WebP品質100
jpg品質100
jpg品質100
555kb サイズ 192kb

下記はWebP品質100とWebP品質75の比較です。

WebP品質75
WebP品質75
WebP品質75
WebP品質100
WebP品質100
192kb サイズ 107kb

下記はWebP品質75とWebP品質50の比較です。

WebP品質50
WebP品質50
WebP品質50
WebP品質75
WebP品質75
107kb サイズ 82kb

下記はWebP品質75(シャープ処理なし)とWebP品質75(シャープ処理あり)の比較です。

WebP品質75(シャープ処理あり)
WebP品質75(シャープ処理あり)
WebP品質75(シャープ処理あり)
WebP品質75(シャープ処理なし)
WebP品質75(シャープ処理なし)
107kb サイズ 114kb

WebPに変換するだけで、50%~80%ファイルサイズが小さくなっているのが分かります。

ただ、品質を上げればファイルサイズは大きくなりますし、シャープ処理を入れても若干ファイルサイズは大きくなるので、どこまで許容できるかはご自身で判断して下さい。分からなければ初期設定推奨です。

一括最適化でWebPファイルを作成する

一括最適化は、既存の画像からまとめてWebPファイルを作成したい時や、クオリティを変更してWebPファイルを再作成したい時に使うと便利です(元のjpgやpngは保持されています)。

プラグイン管理画面の「一括最適化」をクリックします。

一括最適化

再最適化を強制」と「WebPのみ」にチェックを入れて、「最適化されていない画像をスキャンする」をクリックします(「再最適化を強制」にチェックを入れないと最適化済みの画像がスキップされるので注意)。

スキャン

〇〇点の画像を最適化」をクリックすると、最適化(WebPファイルの作成)が始まります。

画像の枚数が多いと少し時間がかかりますが、完了するまでページは閉じないで下さい

最適化

最適化が完了すると、メディアライブラリのリスト表示でWebPのファイルサイズが表示されます(この画面の「再最適化」をクリックして個別に画像を最適化することもできる)。

メディアライブラリ

上手くWebPファイルが作成できない時は、プラグイン管理画面の基本タブにある「強制WebP」にチェックを入れると改善されます(サイズが小さくならない等の変換不要のファイルも強制的にWebPファイルに変換する)。

強制WebP

最適化で作成されたWebPファイルは、元の画像と同じフォルダに保存されます。

WebP配信を確認する

画像を右クリックして、「名前を付けて画像を保存」をクリックします。

名前を付けて画像を保存

ファイル名の拡張子とファイルの種類がWebPになっていればWebP配信がされています。

ファイルの拡張子と種類を確認

上手くWebP配信ができていない時は、プラグイン管理画面から「JS WebPリライト(JavaScript)」及び「Picture WebP Rewriting(pictureタグ)」を使った配信方法も試してみて下さい。

WebP配信の変更

WebP配信を停止する

WebP配信を停止したい時は、.htaccessに追記した下記のコードを削除します。

.htaccessにコードを挿入

プラグインを無効化及び削除しても.htaccessに追記したコードは削除されないので注意して下さい(「リライトルールを挿入する」で自動挿入したコードはプラグインの削除で削除される)。

プラグイン管理画面の「WebP変換」のチェックも外しておきます。

WebP変換のチェックを外す

WebPファイルを削除する

プラグイン管理画面の「最適化された画像を表示」をクリックします。

最適化された画像を表示

WebPファイルを削除したい時は、「WebP画像を削除」をクリックします(確認画面は表示されない)。

WebP画像を削除

最後に

EWWW Image OptimizerのWebP配信は、元のjpgやpng画像を保持したままWebp配信に切り替えられるのが最大のメリットだと思います。自分のサイトに合わないと感じたら元に戻すことができるからです。

ただ、WebPに変換すると、ブロックノイズの様なもやっと感が出てしまう&クオリティを下げると色味も変わってしまうので、個人的には写真ブログには不向きな気がしました(このブログでは使っていません)。

コメント

コメントする

目次