2021年版 EWWW Image Optimizerの設定とWebPへの変換方法

EWWW Image Optimizerの設定とWebPへの変換方法 ブログ

こんにちは、ikuzo(いくぞう)です。

少し前に私の記事を読んだ方からのコメント(ご指摘)で、

WordPressのプラグイン「EWWW Image Optimizer」の設定画面が変わっていることを教えていただきました。

普段マメにチェックしているわけではないので、こういったコメントは本当に有難いです(^_^)

 

以前のEWWW Image Optimizerはこのようにタブがいっぱいあったのですが、

以前のEWWW Image Optimizerの設定画面

いつの間にかシンプルになってました。

今の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」で設定画面を開く

EWWW Image Optimizerの設定について

ちなみに新しいEWWW Image Optimizerの設定画面を日本語に翻訳してみたところ、

こうなりました。

日本語に訳したEWWW Image Optimizerの設定画面

プー太郎
プー太郎

ばかげたモードを有効にする!

うひゃひゃひゃひゃっ!

その、ばかげたモードを有効にしてみるとこうなります。

ばかげたモードを有効にした設定画面

プー太郎
プー太郎

タブがいっぱい出てきた!

そうなんです。

ばかげたモードを有効にすると今までのようにタブがいっぱい出てきて細かい設定ができますが、

わざわざ、ばかげたことをする必要はないでしょう。

裏を返せばそれだけばかげてない「簡単モード」の4つの設定が重要ということです。

EWWW Image Optimizer「簡単モード」の4つの設定

中でも一番下にある「WebP変換」は今後、超重要になると思います。

その「ばかげたモード」ですが(正式には“Enable Ludicrous Mode”です)、

大事な設定がひとつだけあります。

「変換」タブの「変換リンクを非表示」にチェックが入っているかを念のため確認してみて下さい。

最初からチェックが入っていると思いますが、ここにチェックがないと画像の質が悪化して配信される可能性があります。

「変換」タブの「変換リンクを非表示」にチェックが入っているかを確認

EWWW Image Optimizerの簡単モード設定

それではここから「簡単モード」の設定内容をひとつずつ見ていきましょう。

メタデータを削除

一番上の「メタデータを削除」にはあらかじめ チェックが入っていると思いますが、

もし抜けていたらメタデータは特に必要ないのでチェックを入れます。

「メタデータ」を削除にチェックを入れた

プー太郎
プー太郎

メタデータとは、写真を撮った日付や場所など

写真についてる情報のことです。

ちなみにメタデータの上にあるボタンは、有料版と無料版を選択するボタンです。

EWWW Image Optimizerの有料版と無料版は何が違うかというと、圧縮方法が違います。

無料版がロスレス圧縮(再び元の状態に戻せる圧縮)で圧縮率が10~20%位なのに対して

有料版はロッシー圧縮(元の状態には戻せない圧縮)で圧縮率は70~80%位です。

 

有料版の方が圧倒的な圧縮率ですが、ロッシー圧縮なら無料で使える「TinyPNG」がありますし、

ロッシー圧縮は圧縮率が大きい代わりに、画質はもちろん劣化します。

ロスレス圧縮とロッシー圧縮の違いをもう少し詳しく知りたい方は、こちらの記事を読んでみて下さい。

画像のリサイズ

ごく稀にですが、スマホなどで撮影した大きいサイズの写真をそのまま使っているブロガーさんがいらっしゃいます。

たとえばここの設定で「幅の上限」を800に指定しておけば、

仮に幅3840px(ピクセル)という巨大な画像をアップしたとしても、幅800pxの画像に自動で変換してくれます。

プー太郎
プー太郎

ikuzoblogで使っている画像は

最大でも横幅800pxだよ。

私は「PhotoScape X」で画像をリサイズ(サイズ変更)しているので、ここは指定していませんが、

「いちいち画像のリサイズをするのは面倒」という方は、ここで横幅の上限を指定しておくといいと思います。

遅延読み込み

遅延読み込みとは、テキストだけを先に読み込んで画像を表示直前に読み込むことです。

テキストと画像を順番通りに読み込む通常の読み込みよりも速度が速くなります。

ただ、WordPress5.5から遅延読み込み機能が標準になったので、

ここは特にチェックする必要はありません。

WebP変換

先ほども言いましたが、今後はここの設定が超重要になると思います。

WebP(ウェッピー)とは「次世代画像フォーマット」と呼ばれているもので、

現在主流のJPEGやPNGよりもファイルサイズを小さくできると開発元のGoogleが発表しています。

 

これまではWebPに対応するプラウザが少なかったことから使用する人もあまりいませんでしたが、

ここにきてAppleのiOS14や、新しいmacOS Big Sur(Safari)での対応が始まり、

ほとんどのプラウザで表示できるようになりました。

 

さらに私事で恐縮ですが、最近になってサーチコンソールで突如エラーが出たため、

Googleの「PAGESPEED INSIGHTS」で表示速度を調べてみたところ

改善できる項目の1番手に「次世代フォーマットでの画像の配信」を促がされました。

PAGESPEED INSIGHTSで「次世代フォーマットでの画像の配信」を促がされた

要するに対応できるプラウザが増えた今、圧縮効率のよいWebPを使わないと

今後はGoogle様に目をつけられてSEOにもよろしくないと思われます。

ですので、ここは チェックを入れた方が今後は無難でしょう。

 

チェックを入れることにより、JPEGやPNGの画像からWebP画像を自動で生成してくれますが、

チェックを入れただけではWebP画像の配信は行われません。

すべてのプラウザでWebP画像が表示できれば何ら問題はないのですが、

対応していないプラウザ(IE)もあるため、プラウザごとに配信する画像をわける必要があります。

プー太郎
プー太郎

なんだか面倒な話だね。

でも大丈夫です。これはレンタルサーバーの設定を一度してしまえば、画像の使い分けはサーバーが自動でやってくれます。

次の章でその設定をやっていきましょう。

スポンサーリンク

サーバーの「.htaccess」を設定

WebP変換に を入れて「変更を保存」を押すとコードが出現します。

WebP変換にチェックを入れて「変更を保存」を押すとコードが現れる

この四角で囲った部分のコードをレンタルサーバーの「.htaccess」に追記します。

サーバーの設定をする前は、コードの右下には赤く「PNG」と表示されています。

たとえばエックスサーバーの場合は、サーバーパネルに「.htaccess編集」という項目があります。

エックスサーバー サーバーパネルの「.htaccess編集」

「.htaccess編集」を開き、さきほどのコードを貼り付けて「確認画面へ進む」→「実行する」を押します。

すでに他のコードを貼り付けている場合は、その下へ貼り付けましょう。

コードを貼り付けて「確認画面へ進む」→「実行する」を押す

ConoHa WINGの場合は「サイト管理」→「サイト設定」→「応用設定」で.htaccessの編集ができます。

正常に設定が完了すると、赤色表示の「PNG」が緑色の「WebP」に変わります。

赤色の「PNG」が緑色の「WebP」に変わった

これで自動的にWebPに対応しているプラウザにはWebP画像が、

対応していないプラウザには従来通りのJPEGやPNGなどの画像が配信されます。

プー太郎
プー太郎

コピーして.htaccessに

貼り付けるだけでいいんだね。

アップ済みの画像からWebP画像を生成する

ただし、EWWW Image Optimizerをすでに使っていて、過去の記事でアップした画像はそのままではWebPに変換されません。

アップ済みの画像からWebP画像を生成するには、WordPressの「メディア」→「一括最適化」を押します。

WordPressの「メディア」→「一括最適化」を押す

一度最適化された画像は、再び最適化しようとしてもはじかれてしまうので、

「再最適化を強制」と「WebP」に チェックを入れて「最適化されていない画像をスキャンする」を押します。

「再最適化を強制」と「WebP」に  チェックを入れて「最適化されていない画像をスキャンする」を押す

するとWebP変換されていない画像が抽出されるので「画像を最適化」を押します。

「画像を最適化」を押す

ここで初めて気がついたのですが、

私はこれまで1,800もの画像をアップしていて、EWWWで約9倍の画像が生成されていたので

当ブログには16,000以上の画像がありました。自分でもビックリです(・_・;)

これらをすべてWebPへ変換するのに1時間弱かかりました。

プー太郎
プー太郎

画像の数によっては時間がかかるから

ゆっくりお茶でも飲んで待っててね。

すべてWebP画像への変換が完了

WebPで配信されているかを確認する

画像がしっかりWebPで配信されているかを確認するにはプレビュー画面の画像の上で

右クリック→「名前をつけて画像を保存」を押します。

プレビュー画面で 右クリック→「名前をつけて画像を保存」を押す

ファイルの種類がこのように「WEBPファイル」になっていればOKです(Google Chromeの場合)。

ファイルの種類が「WEBPファイル」になっている

IEはWebPにはなりませんが、その他のプラウザでもWebPにならない場合は、キャッシュが残っているのかもしれません。

Google Chromeの場合は、ページを開いた状態で「F12」を押すか、画面の上で右クリック→「検証」を押します。

するとデベロッパーツールというものが画面右側に表示されます。

デベロッパーツールが表示された画面

この状態で画面左上にある「再読み込み」ボタンを右クリックします。

「再読み込み」ボタンを右クリック

「ハード再読み込み」か「キャッシュの消去とハード再読み込み」を押せば画像がWebPに変わると思います。

もしくは先ほどのデベロッパーツールで「Network」→「Img」を押すと、

左側のファイル名の拡張子は「.jpg」や「.png」になっていてもTypeが「webp」になっているので

WebPで画像が配信されていることが分かります。

Typeが「webp」になってればOK

※「png」のままになっている画像は広告です。

最後に

ということで今回はEWWW Image Optimizerの設定方法とWebP画像を配信させる方法でした。

まぁ、近い将来にはこんな設定をしなくても、最初からWebPでアップロードすればいいことになると思いますが。

それまではEWWW Image Optimizerを使って、この設定方法で凌げばいいのではないでしょうか。

 

とはいっても先ほどの口を大きく開けたオッサンの画像は、アップした画像(JPEG)が130KBで

WebP画像はなんと約半分の68KBでした。

侮れませんね、WebP(ウェッピー)。

コメント