こんな方にオススメ
- ワードプレスで便利なプラグインを探している方
- ワードプレスでWebP（ウェッピー）画像を使いたい方
- サイトの表示速度を早めるために画像容量を軽くしたい方
- EWWW Image Optimizerのインストールを検討している方
ワードプレス等でブログ記事を書いていると、1個の記事の中でほぼ必ずと言って良いほど画像を使っていると思います。
情シスの自由帳では主にIT関連の解説系記事を書いているため、１記事で数十枚の画像を使うことも稀にあります。
サーバのディスク容量にも限界がありますし、記事を読んでくれてる人にとっても画像が軽いことに越したことはない！ということで、サイトに掲載している画像を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 |
ブラウザーが対応していないと見れないというデメリットはありますが、今はIE以外はほぼ対応しているため特に心配は要らないと思います。
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言語 |
ワードプレスでブログを始める人には必須とも言えるプラグインだと思います。
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の[設定]をクリックして設定画面に進んでください。
設定画面の中にある[基本]タブの設定を上から解説していきます。
まず、[メタデータを削除]ですが、これはあえてメタデータを残しておく必要が無い場合は、チェックボックスにチェックを入れて削除して貰いましょう。
その下の[遅延読み込み]ですが、画像の遅延読み込みは見る人のストレスを軽減する効果も見込められるためオススメです。具体的には画面をスクロールしてその画像に差し掛かったら初めて画像を読み込ませる機能で、ページを読み込む時に全ての画像を読み込まないため、ページを開く速度の改善が期待できます。
次に[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の先頭に追加する方法を解説していきたいと思います。
設定に誤りがあるとブログに予期せぬエラーが発生する場合があります。「苦手だな」と思う人は詳しい人にヘルプを求めてください。
エックスサーバーの[サーバー管理画面]に入ります。
ページの中の[ホームページ]内にある[.htaccess編集]をクリックしてください。
[.htaccess編集]をクリックすると、[ドメイン選択画面]が表示されます。
使用しているドメインの右にある[選択する]をクリックしてください。
[選択する]をクリックすると、[.htaccess編集]というページが開きます。
ページ内にある[.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
< IfModule mod_rewrite.c>からAddType image/webp .webpまでを貼り付けてください。
貼り付けが終わったら、右下にある[確認画面へ進む]をクリックして進んでください。
右下にある[実行する]ボタンをクリックしてください。
Webpが正しくワードプレスに反映されているか確認する方法
エックスサーバーでの設定が終わったら、ここからはワードプレスに戻ってWebpを使える状態になっているかを確認していきます。
EWWW Image Optimizerの設定画面の右下に[PNG]と書かれていた部分が緑色の[WEBP]になっていることを確認してください。
※反映まで２０分くらいかかる場合があります。少し時間をおいて確認してください。
※今使っているブラウザーがWebpに対応している必要があります。念の為に最新のGoogleChromeを使うことをオススメします。
[このサイトには mod_headers が抜けているようです。この Apache モジュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください。]と表示されている場合
このメッセージがEWWW Image Optimizerの設定に表示されていても特に気にする必要はありません。
このメッセージが出ていてもEWWW Image Optimizerの設定画面の右下に緑色の[WEBP]画像があれば問題ありません。
実際に画像を圧縮してWebpが使えているか確認する方法
ここからは過去にアップロードした画像をEWWW Image Optimizerを使用して圧縮し、Webpが使えているか確認していきます。
ワードプレスの管理画面右側のメニュー内の[メディア]の中にある[一括最適化]をクリックしてください。
[一括最適化]をクリックすると、[一括最適化]の画面に移動します。
[一括最適化]の画面内にある[最適化されていない画像をスキャンする] をクリックしてください。
[XX点の画像を最適化]と書かれたところをクリックしてください。
ここの画像点数が実際に使っている画像より多い理由は、ワードプレスにアップロードした時に自動的に作成されるサムネイル画像の数も含まれているためなので心配しなくても大丈夫です。
[XX点の画像を最適化]と書かれたところをクリックすると、どんどん画像の容量が削減されていきます。
ここにWebpの表示もあれば問題なくWebp画像も作成されているので問題ありません。
通常のEWWW Image Optimizerによる削減率が14.0%（これでも十分ありがたいですが。）に対して、Webpの場合は35.6%の削減率となっています。
Webpでは画像が非常に効率よく削減されていることが確認できます。
EWWW Image Optimizerによる最適がが全て終わると、[最適化するための画像がありません。]と表示されます。
それまで何回か[最適化されていない画像をスキャンする] をクリックして確かめてみてください。
実際のページでWebpが使われているか確認する方法
ここまでで、EWWW Image Optimizerの設定画面上では問題なく設定されており、Webp画像も作成されていることを確認しました。
最後に、実際のページでWebpが使われているか確認していきます。
実際のページでWebpが使われているか確認するには、GoogleChromeのデベロッパー・ツールを使います。
GoogleChromeのデベロッパー・ツールで確認するには、画像を使っているページを開き、キーボードのF12を押してください。
キーボードのF12を押すと、右側に色々な情報が出てきます。
今回はWebpが使われているかを確認する方法に限って解説します。
GoogleChromeのデベロッパー・ツールで表示される内容を拡大しました。
ここの[Type]に書かれているのがファイルの種類です。
[Name]が画像名になっている時に、[Type]がWebpになっていれば正常にWebpで表示されていることが確認できます。
[st_af id="7243"]
その他プラグインに関する記事
その他プラグインに関する記事はこちらです。是非ご覧ください。
最後までご覧いただきありがとうございました。
情シスの自由帳は、情シスマンが半径3m以内のITに関する情報を掲載してるサイトです。
Windows系を主として、ソフトや周辺機器について思い立った物を色々解説しています。
できる限り詳しく、丁寧に解説していくつもりですが、解説で不明な部分やもっと深く掘り下げたほうが良い記事がありましたら遠慮なくコメント欄でコメントいただけるとありがたいです。
操作環境
Windows11 Home
Microsoft Office 2019
コメント