EWWW Image Optimizerを使ってWebp変換・対応させる手順 | プラグイン使用

みなさんもサイトやブログ内に多くの画像ファイルを掲載されていることと思います。

ファイルサイズをできるだけ軽量化しようと圧縮などされているかと思いますが、それでも足りないと考えられるようになってきました。

Googleも次世代形式にした方が良いと案内してきますよね。

渋々ながらも画像を次世代形式に対応させようと思っているけれど、簡単に、失敗しない方法でとお考えでしょう。

でも、新たにプラグインを追加するのは嫌だとお考えで、すでに使っているプラグイン「EWWW Image Optimizer」を使えないかとお考えの方へ向けて、あなたのブログの画像をWebPに対応する方法をお伝えしていきたいと思います。

EWWW Image Optimizerで「できることとできないこと」を先に知りたい方は、記事のまとめを先に読んでみてください。

EWWW Image Optimizerとは

プラグイン公式サイト

EWWW Image Optimizerは、Wordpressの記事にアップロードした画像を、圧縮やリサイズして自動で軽量化するのが主な機能のプラグインで、最も有名なプラグインのひとつです。

よく似たプラグインに「imagify」というのがあります。
投稿画像の自動圧縮やWebP配信など、ほぼ同じですが月に25MBを超えると有料になってしまうため、今回のように既存のサイトの画像を一括で処理するのには不向きなため、おすすめはできません。

「WebP（ウェッピー）」とは？

従来Webで利用される画像ファイルは、「jpeg」「png」「gif」が主流でした。

Webページの表示速度は、記事の検索順位にも影響を与えるとして、画像の軽量化が課題となっていきました。

そして、次世代の画像フォーマットとして、「WebP」「JPEG200」「JPEG-XR」などが登場しました。

「WebP」とは、Googleが開発した高圧縮・軽量な新世代フォーマットのひとつのことです。

次世代フォーマットは、先ほどお伝えしたとおり主に3つありますが、現在では「WebP」一強になっていますので、Webサイトの次世代フォーマット化にはWebPを使っておけば問題ありません。

ブラウザごとに対応が必要

しかしこの画像の次世代フォーマットは、ブラウザ各種が規格を争ってきた経緯から、ブラウザによって表示できるものとできないものがあります。

次世代フォーマットの主流である「WebP」も、ブラウザの種類やバージョンによって対応状況が異なります。

つまり、あなたのサイトやブログでWebP対応するには、訪問者の使用するブラウザの種類やバージョンによって対応を変える必要が出てきます。

以降は、EWWW Image Optimizerを使ってWebP変換するときに、訪問者のブラウザによってWebPへ変換した画像を表示するのか、Jpegなど元の画像を表示するのかの判別についても対応できるように説明していきます。

EWWW Image OptimizerでのWebP（ウェッピー）変換・対応方法

WebP変換設定

まず、[ダッシュボード]-[設定]-[EWWW Image Optimizer]をクリックして設定画面を開きます。

以前に比べてEWWW Image Optimizerの設定画面はかなりシンプルになっており、設定項目も多くはありません。

設定画面の[基本]タブにある[WebP変換]の項目にチェックを入れると、下の画像のような項目が表示されますが、特に変更する必要はなく、そのまま[変更を保存]をクリックします。

既存画像の一括変換

既に投稿されている画像をWebP形式で表示するためには、事前にWebPファイルを作成しておく必要があります。

[ダッシュボード]-[メディア]-[一括最適化]をクリックします。

EWWW Image Optimizerは過去に最適化したファイルをスキップしてしまうので、設定画面右側にある[再最適化を強制]と[WebPのみ]の2箇所にチェックを入れて、[最適化されていない画像をスキャンする]をクリックします。

[〇〇点の画像を最適化]をクリックして変換を開始します。
※ 画像の数はサイトにより異なります。

WebP形式への変換が完了するのを待ちます。

WebPファイルの作成には結構な時間がかかります。
今回の例では約9500ファイルほどありましたが、エックスサーバーで30分以上かかりました。

ファイル変換完了後、FTPソフトなどで確認すると、拡張子.webpのファイルが作成されていることが確認できます。

作成されるWebP形式のファイルは、元ファイルと同じディレクトリに作成されます。

.htaccessの編集

ここでは「.htaccess」によって、ブラウザごとに対応を変える方法をお伝えします。

ご自身で.htaccessを編集できない環境の方は、次の「.htaccessを書き換えずにEWWW Image OptimizerでWebP対応する設定」まで進んでください。

再度、[ダッシュボード]-[設定]-[EWWW Image Optimizer]をクリックして設定画面に戻ると、「WebP の配信方法」の項目の中に、「このサイトには mod_headers が抜けているよう…」という項目が増えています。

先にお伝えしたとおり、閲覧者のブラウザの種類やバージョンによって、WebP形式のファイルか、jpegなどの旧型式の画像を表示するか対応を変える必要があります。

その対応をするためには、上の画像の赤枠で囲った部分を.htaccessへ追記する必要があります。

他にも、以下のように、レンタルサーバーの管理画面から.htaccessを編集することができるサーバーもあります。

FTPなどでの編集が不安な方は、設定画面内にある下の画像のような[リライトルールを挿入する]をクリックすることで、.htaccessに必要なコードを自動追記する機能もあります。

正常に設定完了を確認する

1. WebP変換にチェック
2. WebP形式のファイル作成
3. .htaccessの編集

上記3つの作業完了後、再度EWWW Image Optimizerの設定画面へ戻ると、正常にWebP配信設定が完了していれば、右側に「WebP」と緑色で表示されます。

.htaccessを書き換えずにEWWW Image OptimizerでWebP対応する設定

EWWW Image Optimizerには、.htaccessを使用せずに、ブラウザごとに対応を変化させる方法が２つ用意されています。（使用環境によってはできない場合もあります。）

先ほどWebP変換にチェックを入れたとき、[WebPの配信方法]という項目が出現したと思いますが、そちらから設定を行います。

JavaScriptで表示

.htaccessを自身で書き換えできない方だけでなく、使用しているレンタルサーバーのキャッシュ機能や、CDNを利用している場合、.htaccessで動きを制御できない場合があります。

そんなとき、JavaScriptを使ってブラウザを判別してWebP形式で表示させる機能です。

設定画面の [JS WebP リライト] の項目にチェックを入れて変更を保存することで、.htaccessを変更せずにWebP対応することができます。

<picture>タグを使って表示

<picture>タグを使って、ブラウザごとに表示を切り替えることもできます。

HTMLは下記のような記述になります。

[<picture>WebP リライト] にチェックを入れて変更を保存することで、.htaccessを変更せずにWebP対応することができます。
EWWW Image Optimizerの機能を使えば、HTMLを自動で上記のような記述に変更してくれます。

THE THORを使用しているサイトで実行してみましたが、正常に動作しませんでした。

実際にWebPへ変換して配信されているかの確認方法

例として2つの方法を紹介しますが、いずれの場合も、ChromeなどWebP配信に対応しているブラウザから行ってください。

実際に画像を保存して確認

確認したいページを開き、記事内の画像を、[右クリック]-[名前をつけて画像を保存…]をクリックして、保存しようとしたときのファイル名の拡張子が、「.webp」とななっていれば正常に変換されています。

Chromeのデベロッパーツールから確認

Chromeのデベロッパーツール（開発者ツール）から、画像のタイプを見ることで確認ができます。

1. 該当ページで、[F12]または、[右クリック]-[検証]をクリック
2. 上部の[Network]をクリック
3. 中段の[img]をクリック
   ※ 何も表示されないときは、[F5]などでリロードしてください。

WebP配信をやめたいときの手順

なんらかの事情により、EWWW Image OptimizerでのWebP配信を停止する場合の手順について説明しておきます。

①.htaccessの記述内容を削除する

.htaccessによる配信されている方のみが対象となります。
JavaScriptや<picture>タグで配信されている方は読み飛ばしてください。

WebP配信するために、.htaccessを編集した部分の記述を削除します。

このとき、[リライトルールを挿入する]ボタンをクリックして、EWWW Image Optimizerに自動で記述させた方の場合、.htaccessを手動で編集するか、EWWW Image Optimizerをアンインストールしてください。

②WebPファイル一括削除する

一括変換で作成されたWebPファイルが不要になったとき、EWWW Image OptimizerからWebPファイルのみを一括して削除することができるようにもなっています。

手順は、[ダッシュボード]-[ツール]-[EWWW Image Optimizer]をクリックし、[WebP画像を削除]をクリックで削除が開始されます。

まとめ

ここまで、EWWW Image Optimizerを使用してのWebP変換設定についてお伝えしてきました。

EWWW Image Optimizerを使ってできることは、次のとおりです。

EWWW Image Optimizerは、画像の圧縮や軽量化のためのプラグインとして知られていて、多くの方が利用されているかと思います。

WebP変換・配信を行うために、既にインストールしている方が多いプラグインである、EWWW Image Optimizerを使って対応できるというメリットは大きく、かなりおすすめの方法だと感じました。

また、アップデートによって設定画面がシンプルになり、初心者の方であってもそれほど難しいものではありませんから、google speed insightsの改善にも役に立つはずです。