こんにちは、ikuzo(いくぞう)です。
以前のEWWW Image Optimizerはこのようにタブがいっぱいありましたが、
最近はこのようにシンプルになりました。
9個あったタブが3個になったんだね。
今回はこの新しくなったEWWW Image Optimizerの設定方法と
EWWW Image Optimizerを使った
WebP（ウェッピー）という画像フォーマットへの変換方法について書こうと思います。
EWWW Image Optimizerのインストール
EWWW Image Optimizerをインストールするには、WordPressの「プラグイン」→「新規追加」を押して、
右上の検索窓に「EWWW Image Optimizer」と入れます。
EWWW Image Optimizerは2つ出てくると思いますので、Cloudがない方をインストールしましょう。
インストールが完了したら「有効化」を押して、
「設定」→「EWWW Image Optimizer」で設定画面を開きます。
EWWW Image Optimizerの設定画面
新しいEWWW Image Optimizerの設定画面を日本語に翻訳してみたところ、こうなりました。
ばかげたモードを有効にする！うひゃひゃひゃひゃっ！
その、ばかげたモードを有効にしてみるとこうなります。
タブがいっぱい出てきた！
そうなんです。
ばかげたモードを有効にすると今までのようにタブがいっぱい出てきて細かい設定ができますが、
わざわざ、ばかげたことをする必要はないでしょう。
裏を返せばそれだけ「簡単モード」の4つの設定が重要ということです。
中でも一番下にある「WebP変換」は今後、超重要になると思われます。
「ばかげたモード」（正式には“Enable Ludicrous Mode”）には、大事な設定がひとつだけあります。
「変換」タブを押して「変換リンクを非表示」にチェックが入っているかを確認してみて下さい。
最初からチェックが入っていると思いますが、ここにチェックがないと質の悪い画像を配信してしまう恐れがあります。
EWWW Image Optimizerの設定方法
それでは「簡単モード」の設定内容をひとつずつ見ていきましょう。
メタデータを削除
一番上の「メタデータを削除」にはあらかじめ チェックが入っていると思いますが、
もし抜けていたらメタデータは特に必要ないのでチェックを入れます。
メタデータとは、写真を撮った日付や場所などの写真についてる情報のことです。
ちなみにメタデータの上にあるのは、有料版と無料版を選択するボタンです。
EWWW Image Optimizerの有料版と無料版は何が違うかというと、圧縮方法が違います。
無料版がロスレス圧縮（再び元の状態に戻せる圧縮）で圧縮率が10～20%位なのに対して
有料版はロッシー圧縮（元の状態には戻せない圧縮）で圧縮率は70～80%位です。
有料版の方が圧縮率は高いですが、ロッシー圧縮なら無料で使える「TinyPNG」がありますし、
ロッシー圧縮は圧縮率が高いだけに、画質はそのぶん劣化します。
ロスレス圧縮とロッシー圧縮の違いを詳しく知りたい方は、こちらの記事を読んでみて下さい。
画像のリサイズ
ごく稀にですが、スマホなどで撮影した大きいサイズの写真をそのまま使っているブロガーさんがいらっしゃいます。
たとえばここの設定で「幅の上限」を800に指定しておけば、
仮に幅が3840px（ピクセル）という巨大な画像をアップしても、幅800pxの画像に自動で変換してくれます。
極端に大きい画像を使うと、表示されるスピードが遅くなるからね。
私は「PhotoScape X」で画像をリサイズ（サイズ変更）しているので、ここは指定していませんが、
「いちいち画像のリサイズをするのは面倒」という方は、ここで横幅の上限を指定しておくといいでしょう。
遅延読み込み
遅延読み込みとは、テキストだけを先に読み込んで画像をあとから読み込むことです。
テキストと画像を順番通りに読み込む通常の読み込みよりも速度が速くなります。
ただ、WordPress5.5から遅延読み込み機能が標準になったので、
ここは特にチェックする必要はありません。
WebP変換
先ほども言いましたが、この設定が今後は超重要になりそうです。
WebP（ウェッピー）とは「次世代画像フォーマット」と呼ばれているもので、
今まで主流だったJPEGやPNGよりもファイルサイズを小さくできると開発元のGoogleが表明しています。
以前はWebPに対応するブラウザが少なかったことから使用する人もあまりいませんでしたが、
最近はほとんどのブラウザで表示できるようになりました。
さらに私事で恐縮ですが、最近になってサーチコンソールでエラーが出たため、
Googleの「PAGESPEED INSIGHTS」で表示速度を調べてみたところ
改善できる項目の1番手に「次世代フォーマットでの画像の配信」を促がされました。
要するに対応できるプラウザが増えた昨今、圧縮効率のよいWebPを使わないと
今後はGoogle様に目をつけられてSEOにもよろしくないようです。
なので「WebP変換」には チェックを入れておきましょう。
チェックを入れることにより、JPEGやPNGの画像からWebP画像を自動で生成してくれますが、
チェックを入れただけではWebP画像の配信は行われません。
すべてのブラウザでWebPが表示できれば何ら問題はないのですが、
対応していないブラウザ（IE）がまだあるので、
ブラウザごとに配信する画像をわける必要があります。
なんだか面倒な話だね。
でも大丈夫です。これはレンタルサーバーの設定を一度してしまえば、画像の使い分けはサーバーが自動でやってくれます。
次の章でその設定をやっていきましょう。
サーバーの「.htaccess」を設定
WebP変換に を入れて「変更を保存」を押すとコードが出てきます。
この四角で囲った部分のコードをレンタルサーバーの「.htaccess」に追記します。
（サーバーの設定をする前は、コードの右下には赤く「PNG」と表示されています。）
たとえばエックスサーバー
の場合は、サーバーパネルに「.htaccess編集」という項目があります。
「.htaccess編集」を開き、さきほどのコードを貼り付けて「確認画面へ進む」→「実行する」を押します。
すでに他のコードを貼り付けている場合は、その下へ貼り付けましょう。
ConoHa WING
の場合は「サイト管理」→「サイト設定」→「応用設定」で.htaccessの編集ができます。
正常に設定が完了すると、赤色表示の「PNG」が緑色の「WebP」に変わります。
これでWebPに対応しているプラウザには自動的にWebP画像が、
対応していないプラウザには従来通りのJPEGやPNGなどの画像が配信されるようになります。
コピーして.htaccessに貼り付けるだけでいいんだね。
一括最適化でWebP画像を生成
ただし、EWWW Image Optimizerを使い始めても、それまでにアップした画像はそのままではWebPに変換されません。
アップ済みの画像からWebP画像を生成するには、WordPressの「メディア」→「一括最適化」を押します。
EWWW Image Optimizerで圧縮済みの画像は、再び最適化しようとしてもはじかれてしまうので、
「再最適化を強制」と「WebPのみ」に チェックを入れて「最適化されていない画像をスキャンする」を押します。
するとWebP変換されていない画像が抽出されるので「画像を最適化」を押します。
ちなみに私は画像をこれまで1,800程度アップしていて、EWWWで9倍の画像が生成されていたので16,000以上の画像があり、
これらをすべてWebPへ変換するのに1時間弱かかりました。
画像の数によっては時間がかかるから、ゆっくりお茶でも飲んで待っててね。
WebPで配信されているかを確認する
画像がしっかりWebPで配信されているかを確認するにはプレビュー画面の画像の上で
右クリック→「名前をつけて画像を保存」を押します。
ファイルの種類がこのように「WEBPファイル」になっていればOKです（Google Chromeの場合）。
IEはWebPにはなりませんが、その他のプラウザでもWebPにならない場合は、キャッシュが残っているのかもしれません。
Google Chromeの場合は、ページを開いた状態で「F12」を押すか、画面上で右クリック→「検証」を押します。
するとデベロッパーツールというものが表示されます。
この状態で「再読み込み」ボタンを右クリックします。
「ハード再読み込み」か「キャッシュの消去とハード再読み込み」を押せば画像がWebPに変わると思います。
もしくはデベロッパーツールで「Network」→「Img」を押すと、
ファイル名の拡張子は「.jpg」や「.png」になっていても、Typeが「webp」になっているので
WebPで画像が配信されていることが分かります。
※「png」のままになっている画像は広告です。
デベロッパーのTypeが「webp」で、ファイル名の拡張子が「.jpg」や「.png」の場合は、
「<picture> WebP リライト」に チェックを入れてみて下さい。
拡張子も「.webp」に変わると思います。
最後に
ということで今回はEWWW Image Optimizerの設定方法とWebP画像を配信させる方法でした。
近い将来はこんな設定をしなくても、最初からWebPでアップロードすればいいことになると思います。
それまではEWWW Image Optimizerを使って、この設定方法で凌げばいいのではないでしょうか。
とはいっても先ほどの口を大きく開けたオッサンの画像は、
アップした圧縮済みの画像（JPEG）が130KBで、WebP画像はなんと約半分の68KBでした。
侮れませんね、WebP（ウェッピー）。
コメント
アドバイスをいただいてから間が空いてしまいましたが、早速手引き通り作業をさせて頂きました。無事完了致しました。最後の画像確認まで、キャッシュの処理手順、大変参考になりました。本当にいつも有り難う御座います。
Kousouenさん、こんにちは。
無事に設定できたようで何よりです！
これからはWebPが主流になりそうですよね。
こちらこそEWWWの設定画面が変わっていることを教えていただき、ありがとうございました！
有益な記事をありがとうございます。
画像をWebPに変換した場合、Cocoonの設定に変更は必要ありませんか？
たむら船堀さん、こんにちは。
Cocoonで設定するところは特にありません。
宜しくお願いいたします(^_^)
はじめまして。
いつもサイトを参考にさせていただいています。
最近、新規記事がインデックスされない状況が続いています。
Googleがモバイルフレンドリー化を勧めていることが原因と分かったのですが、少しでもサイトを軽くするためにと検索していたら、この記事に辿り着きました！
とっても分かりやすく無事に設定でき、サイトの高速化に役に立ちました！ありがとうございました！！
bunyuさん、こんにちは。
うれしいコメント、ありがとうございます。
少しでもお役に立てて良かったです(^_^)
私でも出来ました(´ω`)
いろんな事を再確認します。
分かりやすい説明ありがたいです
ココさん、こんにちは。
お役に立てたようで何よりです。
また「分かりやすい」といっていただき、ありがとうございます(^_^)