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

画像のWebP変換

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

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

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

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

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

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

EWWW Image Optimizerとは

EWWW Image Optimizerプラグインページ
プラグイン公式サイト

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

主な機能

  • アップロード画像の自動圧縮
  • 画像の一括圧縮
  • EXIFなどのメタデータ削除
  • 画像のリサイズ
  • 画像の遅延読込
  • WebP(ウェッピー)対応

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

EWWW Image Optimizerのインストール方法は、他の一般的なプラグインのインストール方法と同様のため、解説は省略します。

「WebP(ウェッピー)」とは?

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]をクリックして設定画面を開きます。

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

今回は、WebP関連以外の設定については省略します。

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

既存画像の一括変換

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

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

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

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

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

変換という言葉を使っていますが、jpegやpng元のファイルはそのまま残っています。
新たに拡張子.WebPのファイルが作成されることになります。
管理人吹き出し画像
WebPファイルの作成には結構な時間がかかります。
今回の例では約9500ファイルほどありましたが、エックスサーバーで30分以上かかりました。

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

管理人吹き出し画像
作成されるWebP形式のファイルは、元ファイルと同じディレクトリに作成されます。
WebP設定後にアップロードした画像については、アップロード時に自動でWebPファイルが作成されますので、設定後は通常とおり記事の投稿をするだけでWebP配信されます。

.htaccessの編集

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

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

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

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

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

.htaccess編集方法
FTPクライアントを使って、.htaccessを編集するのが一般的です。レンタルサーバー各社が用意しているFTP画面から編集できる場合があります。

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

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

htaccess自動編集機能

ドメイン直下とサブドメインにあるWordpressの場合は、.htaccessに自動でコードが追記されたことを確認しましたが、サブディレクトリにあるWoordpresの場合は検証できていません。

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

WebP設定完了

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

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

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

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

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

JavaScriptで表示

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

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

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

<picture>タグを使って表示

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

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

<picture>
<source type=”image/webp” src=”https://example.com/img/image.webp”>
<img src=”https://example.com/img/image.jpg”>
</picture>

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

使用しているテーマによっては、正常に動作しないことがあります。
管理人吹き出し画像
THE THORを使用しているサイトで実行してみましたが、正常に動作しませんでした。

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

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

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

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

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

WebP変換正常確認方法
Chromeのデベロッパーツール(開発者ツール)から、画像のタイプを見ることで確認ができます。

  1. 該当ページで、[F12]または、[右クリック]-[検証]をクリック
  2. 上部の[Network]をクリック
  3. 中段の[img]をクリック
    ※ 何も表示されないときは、[F5]などでリロードしてください。
上の画像の中で、pngなど、WebPとなっていない画像がありますが、ショートコードを使って呼び出した画像についてはWebP変換して配信されていませんでした。

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

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

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

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

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

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

EWWW Image Optimizerを無効化しただけでは、.htaccessは変更されません。

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

WebPファイル一括削除

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

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

まとめ

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

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

  1. wp-content/uploadsフォルダ内の画像が対象(/themeフォルダ内は対象外)
  2. jpeg、pngのWebP変換に対応(gifは有料)
  3. 既存画像を一括してWebP形式のファイルを作成できる
  4. 作成されたWebP形式のファイルはwp-content/uploads内に作成される
  5. 設定後にアップロードした画像は、アップロード時に自動でWebPファイルが作成される
  6. .htaccess編集によってブラウザ対応ができる
  7. .htaccessを使わずに、JavaScriptや<picture>タグを使用してのブラウザ対応もできる
  8. WebP配信を中止したいとき、WebPファイルのみ一括削除も可能
  9. ショートコードを使用して呼び出している画像についてはWebP配信できない

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

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

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

満足できる!!
レンタルサーバー集

実際に使ってわかった初心者にもおすすめできるサーバー集

これで戦える!
WordPressテーマ集

ブログも!アフィリエイトも!おすすめのテーマ徹底比較