ワードプレス(WordPress)の画像を最適化して高速化するプラグイン EWWW Image Optimizerを使って画像ファイルをWebP形式に変換する方法を解説します。
- EWWW Image Optimizeを使って既存の画像ファイルをWebP形式に一括変換する方法がわかります
EWWW Image OptimizerとWebPで実現できること
EWWW Image Optimizerは画像ファイルを圧縮してくれるプラグインです。
EWWW Image Optimizerの機能の中にある「WebP変換」を使うと更に高圧縮で画像ファイルサイズを縮小化してくれるのでブログ・サイトの表示速度が速くなります。
WebPはJPEG形式の画像よりも約25～34％ほど圧縮されます
ただしデメリットとして古いブラウザでは画像は表示されません。例えばIEです。それらの対応していないブラウザの使用率は1％以下なのでWebPを導入したほうがメリットは大きいです。
EWWW Image Optimizerのインストール方法や基本的な設定方法はこちらの記事で詳細に解説しています↓
EWWW Image Optimizer 画像ファイルサイズを圧縮して高速化するプラグイン 設定方法と使い方
WebPの設定方法
WebPの設定方法について解説します。
WebPの設定方法は下記の手順になります。
- 基本タブの「WebP 変換」にチェックマークを入れる
- サーバの.htaccessファイルを編集
先ずはEWWW Image Optimizerの基本(設定)画面内の基本タブを表示させます。
「設定」内の「EWWW Image Optimize」
↑↑WoredPressのダッシュボード(管理者画面)の「設定」の「EWWW Image Optimize」をクリックして基本設定画面を表示します。
①「WebP 変換」にチェックマークを入れる
EWWW Image Optimizerの基本(設定)画面- 「WebP変換」にチェックマークを入れます
- 下にコードが表示されるのでコピーしてメモ帳などに控えておきます
②サーバの.htaccessファイルを編集
次に先ほどのコードをWebサーバの.htaccessファイルに追記します。
当記事ではレンタルサーバのエックスサーバーで.htaccessファイルを編集していますが、他社のレンタルサーバでも同様の手順になります。
エックスサーバーのサーバーパネルログイン画面↑エックスサーバーのサーパーパネルにログインします。
サーパーパネル画面↑サーバーパネルのホームページ項目内の「.htaccess編集」をクリックします。
ドメイン選択画面↑対象のドメインの選択するをクリックします。
.htaccess編集画面↑「.htaccess編集」タブをクリックします。
.htaccess編集画面↑EWWW Image Optimizerの基本設定の「WebP変換」にチェックマークを入れた後に表示されたコードを一番上に貼り付けます。
.htaccessファイルの最下行にコードを貼り付けても大丈夫です
.htaccess編集の「確認」画面のボタン↑コードを貼り付けたら画面の一番下の確認画面へ進むボタンをクリックします。
続いて画面の一番下に表示される実行するボタンをクリックします。
.htaccess編集完了表示↑この画面が表示されたらレンタルサーバ側の設定は完了です。
つづいてEWWW Image Optimizerの基本(設定)画面に戻ります。
EWWW Image Optimizerの基本(設定)画面↑コードを.htaccessに貼り付ける前は赤くPNGと表示されていた箇所が緑色でWEBPと表示されるので、正常に設定が完了したことを確認できます。
一括最適化で画像ファイルをWebPで生成
WebP設定が完了した後にWordPressに保存された画像ファイルは自動的にWebPに変換されますが、WebP設定前に保存されていた画像ファイルは自動的に変換されません。
一括最適化を実施して以前の画像ファイルをWebPに変換する方法を解説します。
WoredPressのダッシュボード(管理者画面)の「メディア」内にある「一括最適化」↑メディア内の一括最適化をクリックします。
EWWW Image Optimizerの一括最適化画面- 「再最適化を強制」と「WebPのみ」の2か所にチェックマークを入れます
- 「最適化されていない画像をスキャンする」ボタンをクリックします
既に圧縮している画像ファイルは「再最適化を強制」と「WebPのみ」にチェックマークを入れて有効化しないとは最適化されません。
EWWW Image Optimizerの一括最適化画面↑○○点の画像を最適化ボタンをクリックします。
○○は実際に最適化される画像ファイルの枚数が表示されます。
EWWW Image Optimizer 一括最適実化施中の画面↑画像ファイル数とサーバの性能や負荷によって最適化が完了する時間が前後します。
実際に掛かった時間は約3000枚のファイルで約6分でした。
EWWW Image Optimizer 一括最適化完了画面↑「完了」と表示されたら一括最適化は終了です。
以上で画像ファイルの一括WebP変換は完了です。
WebP変換確認
EWWW Image Optimizerの一括最適化で画像ファイルがWebPに変換されているのか確認する手順を解説します。
WebP形式に変換されているかを確認する方法は下記の2つあります。
- ブログ・サイトの画像の上で右クリックの「名前を付けて画像を保存」から確認
- Google Chromeのデベロッパーツールで確認
①ブログ・サイトの画像の上で右クリックの「名前を付けて画像を保存」から確認
ブログ・サイトの画像が表示されているの画面の上で右クリックして表示されるメニュー内の「名前を付けて画像を保存」を選択すると”ファイルの種類”と”ファイル名の拡張子”でWebPになっていることを確認できます。
ブログの画像の上で右クリックして表示される「名前を付けて画像を保存」をクリック↑投稿記事のプレビュー画面等で表示させた画像の上で右クリックすると表示されるメニュー内にある「名前を付けて画像を保存」をクリックします。
「名前を付けて保存」画面↑「名前を付けて保存」画面の下記項目でWebPになっていることを確認します。
- ファイル名：○○.webp
- ファイルの種類：WEBPファイル
以上の方法でWebPファイルになっていることを確認可能です。
②Google Chromeのデベロッパーツールで確認
WebブラウザがGoogle Chromeの場合は、ブログ・サイトの確認したいページを開いた状態で「F12」キーを押すか、画面上で右クリックして表示されるメニュー内にある「検証」をクリックします。
Google Chromeのデベロッパーツール画面↑デベロッパーツール画面の上の段にある「Network」→「img」をクリックします。
下に画像ファイル一覧が表示されるので「Type」列から「webp」になっていることを確認できます。
「Name」列の画像ファイルの拡張子が.jpgになっていてもType列がwebpになっていれば大丈夫です。
以上がWebPに変換されていることを確認する方法です。
WebPに変換後の画像ファイルサイズ比較
WebPに変換する前と変換後のファイルサイズは次のようになりました。
- WebP変換前：28.0KB
↓ - WebP変換後：20.0KB
1024×282ピクセルのjpgファイルです。
WordPressにアップロードする前に画像圧縮ソフトを通して軽量化しているのでWebP変換後でも、さほど削減減率は高くないです。
まとめ
最近はスマホ(モバイル)のページ表示速度の速さがSEOの指標になっているので、画像を圧縮して軽量化することでサイト表示速度を上げるのは非常に大切です。
画像ファイルの形式をWebPに変えるのは表示速度向上の根本を改善する施策なので、積極的に実施することをおすすめします。
画像ファイルの形式をWebPに変換する方法は多岐にわたりますが、そのなかでもEWWW Image Optimizerで変換する方法はWordPressのプラグインなので手軽に利用できるため簡単な方法です。
EWWW Image Optimizer本来の画像ファイル圧縮機能とWebP形式変換の相乗効果も期待できます。
さらにEWWW Image Optimizerは人気のプラグインなのでアップデート(更新)も頻繁に実施されているので安心して使うことができます。
EWWW Image Optimizerのインストールと設定方法の詳細な手順はこちらの記事です↓
EWWW Image Optimizer 画像ファイルサイズを圧縮して高速化するプラグイン 設定方法と使い方
