【WordPress】プラグイン「EWWW Image Optimizer」で画像をWebP対応

「EWWW Image Optimizer」のWebP画像変換機能

プラグイン「EWWW Image Optimizer」を使って、JPEGやPNG画像をWebP画像へ変換する方法についてまとめました。

「EWWW Image Optimizer」はJPEGやPNG、GIF画像の軽量化の為にインストールされている方も多いので、
有名なプラグインだと思います。

で、このプラグインには、WebPフォーマットの画像への対応機能も備わっています。

WebP画像への変換機能を有効にしておくと、画像アップロード時に通常のサムネイルなどの画像とは別に、
拡張子「.webp」の画像も作成してくれます。
※元画像のWebP画像も作成されます。
↓
このような感じですね。

私は、「WebP Express」というプラグインを使って対応することが多いですが、
「EWWW Image Optimizer」をインストールされている方であれば、余分なプラグインを増やす必要がなくなるので、こちらを利用されることをおすすめします。

「WebP Express」については、以下を参照して下さい。
[ プラグイン「WebP Express」でWebP画像へ対応Express ]

WebP Expressの設定方法

WebP Expressのインストールと設定

既にインストール済みの方も多いと思いますが、まだインストールされていない方は、
WordPressの管理画面上から該当プラグインを検索して、インストール、有効化まで行って下さい。

インストールが完了すると、
管理画面左メニューの「設定」→「EWWW Image Optimizer」と遷移して下さい。

デフォルトだと「Basic」タブが表示されているので、「WebP」タブをクリックして下さい。

↓

「WebP」タブに遷移すると、
画面の一番上に「JPG, PNG から WebP」というチェックボックスがあるので、そちらにチェックを入れて「変更を保存」をクリックして下さい。

設定の保存が完了すると、以下のような画面が表示されます。

このまま、「リライトルールを挿入する」をクリックして下さい。

これにより、以下の記述が.htaccessに挿入されます。

# BEGIN EWWWIO
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_URI}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
# END EWWWIO
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

もし、管理画面上から.htaccessへの書き込み権限が無い場合には、コピペして手動で追記して下さい。

これで、WebP対応の設定は完了です。
機能が正常に有効化されれば、右下に背景書が赤色で「PNG」と表示されていたのが、背景色が緑色で「WEBP」の表示に変わります。

既存画像のWebP対応

既存のアップロード画像については、
管理画面左メニューの「メディア」→「一括最適化」から作成することができます。

と言っても、画像の最適化を行うと、同時に拡張子が「.WebP」の画像も作成されるイメージです。

その為、既に最適済みの画像もWebP対応する場合には、
「以前に最適化された画像はデフォルトでスキップされます。スキャン前にこのボックスをチェックすると上書き出来ます。」のチェックボックスにチェックを入れてから、一括最適化を行って下さい。