その他

ワードプレスで画像を一括でWebPに変換してくれるプラグイン EWWW Image Optimizer

2021年12月13日

ワードプレス等でブログ記事を書いていると、1個の記事の中でほぼ必ずと言って良いほど画像を使っていると思います。
情シスの自由帳では主にIT関連の解説系記事を書いているため、1記事で数十枚の画像を使うことも稀にあります。
サーバのディスク容量にも限界がありますし、記事を読んでくれてる人にとっても画像が軽いことに越したことはない!ということで、サイトに掲載している画像をEWWW Image Optimizerを使用して圧縮&WebP(ウェッピー)に変換していきたいと思います。

WebP(ウェッピー)とは

WebP(ウェッピー)はGoogle社が開発した静止画像の次世代フォーマットで、ウェブサイトのトラフィック量軽減と表示速度短縮を目的に開発されたとされています。
Google社からのコメントでも「PNGと比較してサイズが26%小さくなっています。 JPEG画像よりも25〜34%小さくなります。」とされています。原文はこちら。

Google社が作ったフォーマットなので、既存のpngやjpgより軽いことは想定済みですが、それ以外にも嬉しい点があります。
なんとWebP(ウェッピー)は背景透過や、アニメーションにも対応しているのです!

これまで背景透過はPNG、アニメーションはGIFとあれこれ変換しながら使い分けていましたが、ウェブサイトにおいてはWebP(ウェッピー)に統一されていくでしょう。(GIFはあまり普及しなかったですしね・・・。)

背景透明化アニメーション
WebP(ウェッピー)OK OK
PNG OK NG
JPG(JPEG) NG NG
GIF OK OK
WebP、PNG、JPG、GIF比較

ブラウザーが対応していないと見れないというデメリットはありますが、今はIE以外はほぼ対応しているため特に心配は要らないと思います。

ワードプレスで画像を一括でWebPに変換してくれるプラグイン EWWW Image Optimizer ブラウザー別対応状況
ブラウザー別対応状況
https://caniuse.com/?search=webp

母数がはっきりとはしませんが、全体の95.77%が対応しているというのは安心ですね。

EWWW Image Optimizerとは

EWWW Image Optimizerはワードプレスのプラグインで、アップロードした画像をその都度自動的に縮小、最適化してくれるプラグインです。

過去の画像をまとめてWebPに変換して圧縮してくれる機能や、画像の読み込みを遅延させることでウェブサイトの表示速度を早め、快適にサイトを読み込ませる機能もあります。
有効インストール数:900,000+で、評価は★4.5という非常に有名で人気のプラグインです。

作成者Exactly WWW
対応しているWordPress バージョン5.6またはそれ以降
検証済み最新バージョン5.9
PHP バージョン7.2またはそれ以降
対応言語日本語、英語、フランス語、イタリア語、スペイン語等全28言語
2022年2月現在の情報

ワードプレスでブログを始める人には必須とも言えるプラグインだと思います。

EWWW Image Optimizerの公式サイトは英語記載ですが、日本語にも対応しています。
EWWW Image Optimizerの公式サイトはこちら

EWWW Image Optimizerをインストールして有効化する方法

まずはWebPに変換してくれるプラグインEWWW Image Optimizerをインストールして有効化していきます。

EWWW Image Optimizerをインストールして有効化する
EWWW Image Optimizerをインストールして有効化する

ワードプレスの左側にある[プラグイン]の中の[新規追加]をクリックしてください。
右上に表示される[キーワード]で[EWWW Image Optimizer]を検索してください。

EWWW Image Optimizerをインストールして有効化する
EWWW Image Optimizerをインストールして有効化する

[EWWW Image Optimizer]を見つけて[今すぐインストール]をクリックしてください。
検索結果に複数のプラグインhが表示されますが類似のプラグインを誤ってインストールしないようにしてください。

EWWW Image Optimizerをインストールして有効化する
EWWW Image Optimizerをインストールして有効化する

[今すぐインストール]をクリックすると、EWWW Image Optimizerのステータスがインストール中に変わります。
暫くするとインストールが終わり、[有効化]というボタンに変わりますので、[有効化]に変わったら[有効化]をクリックしてください。

EWWW Image Optimizerの設定方法

ここからはEWWW Image Optimizerの設定をしていきます。
この記事では初心者の方に向けて最低限の設定のみをご紹介していきます。

EWWW Image Optimizerの設定
EWWW Image Optimizerの設定

EWWW Image Optimizerの[設定]をクリックして設定画面に進んでください。

EWWW Image Optimizerの設定
EWWW Image Optimizerの設定

設定画面の中にある[基本]タブの設定を上から解説していきます。
まず、[メタデータを削除]ですが、これはあえてメタデータを残しておく必要が無い場合は、チェックボックスにチェックを入れて削除して貰いましょう。

その下の[遅延読み込み]ですが、画像の遅延読み込みは見る人のストレスを軽減する効果も見込められるためオススメです。具体的には画面をスクロールしてその画像に差し掛かったら初めて画像を読み込ませる機能で、ページを読み込む時に全ての画像を読み込まないため、ページを開く速度の改善が期待できます。

EWWW Image Optimizerの設定
EWWW Image Optimizerの設定

次に[Webp変換]ですが、今回は画像をWebpに変換することを目的としているのでチェックボックスにチェックを入れてください。

その下の[Webpの配信方法]ですが、青枠で囲った以下の文字のコードをレンタルサーバー等の.htaccessの先頭に追加します。
メモ帳とかにコピーしておいてください。

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
	RewriteCond %{REQUEST_FILENAME}\.webp -f
	RewriteCond %{QUERY_STRING} !type=original
	RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
	<FilesMatch "\.(jpe?g|png|gif)$">
		Header append Vary Accept
	</FilesMatch>
</IfModule>
AddType image/webp .webp

これでEWWW Image Optimizerの設定はお終いです。
左下にある、[変更を保存]ボタンを押し忘れないようにしてください。

Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編

ブログで使っている人も多いと思われるXserver(エックスサーバー)ですが、情シスの自由帳でもエックスサーバーを使用させていただています。
ここからは、エックスサーバーをレンタルしている人向けに、EWWW Image OptimizerでWebpを配信するために必要な情報を.htaccessの先頭に追加する方法を解説していきたいと思います。

設定に誤りがあるとブログに予期せぬエラーが発生する場合があります。「苦手だな」と思う人は詳しい人にヘルプを求めてください。

Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編
Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編

エックスサーバーの[サーバー管理画面]に入ります。
ページの中の[ホームページ]内にある[.htaccess編集]をクリックしてください。

Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編
Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編

[.htaccess編集]をクリックすると、[ドメイン選択画面]が表示されます。
使用しているドメインの右にある[選択する]をクリックしてください。

Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編
Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編

[選択する]をクリックすると、[.htaccess編集]というページが開きます。
ページ内にある[.htaccess編集]と書かれたタブをクリックしてください。

Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編
Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編

赤い点線で囲われた中に書かれている文字の先頭に[WebP の配信方法]で書かれていた文字を貼付けます。

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
	RewriteCond %{REQUEST_FILENAME}\.webp -f
	RewriteCond %{QUERY_STRING} !type=original
	RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
	<FilesMatch "\.(jpe?g|png|gif)$">
		Header append Vary Accept
	</FilesMatch>
</IfModule>
AddType image/webp .webp
Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編
Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編

< IfModule mod_rewrite.c>からAddType image/webp .webpまでを貼り付けてください。

Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編
Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編

貼り付けが終わったら、右下にある[確認画面へ進む]をクリックして進んでください。

Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編
Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編

右下にある[実行する]ボタンをクリックしてください。

Webpが正しくワードプレスに反映されているか確認する方法

エックスサーバーでの設定が終わったら、ここからはワードプレスに戻ってWebpを使える状態になっているかを確認していきます。

Webpに必要な情報を.htaccessの先頭に追加する方法 エックスサーバー編
Webpが正しくワードプレスに反映されているか確認します

EWWW Image Optimizerの設定画面の右下に[PNG]と書かれていた部分が緑色の[WEBP]になっていることを確認してください。
※反映まで20分くらいかかる場合があります。少し時間をおいて確認してください。
※今使っているブラウザーがWebpに対応している必要があります。念の為に最新のGoogleChromeを使うことをオススメします。

[このサイトには mod_headers が抜けているようです。この Apache モジュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください。]と表示されている場合

このメッセージがEWWW Image Optimizerの設定に表示されていても特に気にする必要はありません。
このメッセージが出ていてもEWWW Image Optimizerの設定画面の右下に緑色の[WEBP]画像があれば問題ありません。

実際に画像を圧縮してWebpが使えているか確認する方法

ここからは過去にアップロードした画像をEWWW Image Optimizerを使用して圧縮し、Webpが使えているか確認していきます。

実際に画像を圧縮してWebpが使えているか確認する方法
実際に画像を圧縮してWebpが使えているか確認する方法

ワードプレスの管理画面右側のメニュー内の[メディア]の中にある[一括最適化]をクリックしてください。
[一括最適化]をクリックすると、[一括最適化]の画面に移動します。
[一括最適化]の画面内にある[最適化されていない画像をスキャンする] をクリックしてください。

実際に画像を圧縮してWebpが使えているか確認する方法
実際に画像を圧縮してWebpが使えているか確認する方法

[XX点の画像を最適化]と書かれたところをクリックしてください。
ここの画像点数が実際に使っている画像より多い理由は、ワードプレスにアップロードした時に自動的に作成されるサムネイル画像の数も含まれているためなので心配しなくても大丈夫です。

実際に画像を圧縮してWebpが使えているか確認する方法
実際に画像を圧縮してWebpが使えているか確認する方法

[XX点の画像を最適化]と書かれたところをクリックすると、どんどん画像の容量が削減されていきます。
ここにWebpの表示もあれば問題なくWebp画像も作成されているので問題ありません。
通常のEWWW Image Optimizerによる削減率が14.0%(これでも十分ありがたいですが。)に対して、Webpの場合は35.6%の削減率となっています。
Webpでは画像が非常に効率よく削減されていることが確認できます。

実際に画像を圧縮してWebpが使えているか確認する方法
実際に画像を圧縮してWebpが使えているか確認する方法

EWWW Image Optimizerによる最適がが全て終わると、[最適化するための画像がありません。]と表示されます。
それまで何回か[最適化されていない画像をスキャンする] をクリックして確かめてみてください。

実際のページでWebpが使われているか確認する方法

ここまでで、EWWW Image Optimizerの設定画面上では問題なく設定されており、Webp画像も作成されていることを確認しました。
最後に、実際のページでWebpが使われているか確認していきます。

実際に画像を圧縮してWebpが使えているか確認する方法
実際のページでWebpが使われているか確認する方法

実際のページでWebpが使われているか確認するには、GoogleChromeのデベロッパー・ツールを使います。
GoogleChromeのデベロッパー・ツールで確認するには、画像を使っているページを開き、キーボードのF12を押してください。
キーボードのF12を押すと、右側に色々な情報が出てきます。
今回はWebpが使われているかを確認する方法に限って解説します。

実際に画像を圧縮してWebpが使えているか確認する方法
実際のページでWebpが使われているか確認する方法

GoogleChromeのデベロッパー・ツールで表示される内容を拡大しました。
ここの[Type]に書かれているのがファイルの種類です。
[Name]が画像名になっている時に、[Type]がWebpになっていれば正常にWebpで表示されていることが確認できます。

その他プラグインに関する記事

その他プラグインに関する記事はこちらです。是非ご覧ください。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
ワードプレスで関連記事を自動で表示してくれるプラグイン YARPP
BingのSEO対策 Bing URL Submissions Pluginを解説

最後までご覧いただきありがとうございました。
情シスの自由帳は、情シスマンが半径3m以内のITに関する情報を掲載してるサイトです。

Windows系を主として、ソフトや周辺機器について思い立った物を色々解説しています。
できる限り詳しく、丁寧に解説していくつもりですが、解説で不明な部分やもっと深く掘り下げたほうが良い記事がありましたら遠慮なくコメント欄でコメントいただけるとありがたいです。

操作環境
Windows11 Home
Microsoft Office 2019

-その他
-,