当ブログは広告が含まれています

【最新】EWWW Image Optimizerの設定とWebPへの変換方法

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

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

以前の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の画像に自動で変換してくれます。

プー太郎
プー太郎

極端に大きい画像を使うと、表示されるスピードが遅くなるからね。

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

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

遅延読み込み

遅延読み込みとは、テキストだけを先に読み込んで画像をあとから読み込むことです。

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

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

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

WebP変換

先ほども言いましたが、この設定が今後は超重要になりそうです。

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

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

 

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

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

 

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

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

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

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

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

今後はGoogle様に目をつけられてSEOにもよろしくないようです。

なので「WebP変換」には チェックを入れておきましょう。

 

チェックを入れることにより、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の「メディア」→「一括最適化」を押す

EWWW Image Optimizerで圧縮済みの画像は、再び最適化しようとしてもはじかれてしまうので、

「再最適化を強制」と「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」のままになっている画像は広告です。

 

デベロッパーのTypeが「webp」で、ファイル名の拡張子が「.jpg」や「.png」の場合は、

「<picture> WebP リライト」に チェックを入れてみて下さい。

拡張子も「.webp」に変わると思います。

「<picture> WebP リライト」にチェックを入れた

スポンサーリンク

最後に

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

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

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

 

とはいっても先ほどの口を大きく開けたオッサンの画像は、

アップした圧縮済みの画像(JPEG)が130KBで、WebP画像はなんと約半分の68KBでした。

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

コメント

  1. Kousouen より:

    アドバイスをいただいてから間が空いてしまいましたが、早速手引き通り作業をさせて頂きました。無事完了致しました。最後の画像確認まで、キャッシュの処理手順、大変参考になりました。本当にいつも有り難う御座います。

    • ikuzo|いくぞう より:

      Kousouenさん、こんにちは。
      無事に設定できたようで何よりです!
      これからはWebPが主流になりそうですよね。
      こちらこそEWWWの設定画面が変わっていることを教えていただき、ありがとうございました!

  2. たむら船堀 より:

    有益な記事をありがとうございます。
    画像をWebPに変換した場合、Cocoonの設定に変更は必要ありませんか?

    • ikuzo|いくぞう より:

      たむら船堀さん、こんにちは。

      Cocoonで設定するところは特にありません。
      宜しくお願いいたします(^_^)

  3. bunyu より:

    はじめまして。
    いつもサイトを参考にさせていただいています。

    最近、新規記事がインデックスされない状況が続いています。
    Googleがモバイルフレンドリー化を勧めていることが原因と分かったのですが、少しでもサイトを軽くするためにと検索していたら、この記事に辿り着きました!

    とっても分かりやすく無事に設定でき、サイトの高速化に役に立ちました!ありがとうございました!!

    • ikuzo|いくぞう より:

      bunyuさん、こんにちは。
      うれしいコメント、ありがとうございます。
      少しでもお役に立てて良かったです(^_^)

  4. ココ より:

    私でも出来ました(´ω`)
    いろんな事を再確認します。
    分かりやすい説明ありがたいです

    • ikuzo|いくぞう より:

      ココさん、こんにちは。

      お役に立てたようで何よりです。
      また「分かりやすい」といっていただき、ありがとうございます(^_^)