「EWWW Image Optimizer」を使ってWordPressをWebPに対応する方法

WebP(ウェッピー)はGoogleが開発した画像形式で、簡単に説明すると「JPEGのように軽く、PNGのようにアルファチャンネル（透過）に対応した画像」です。

JPEGとPNGのいいとこ取りをしたような画像形式なのですが、対応ブラウザがまだまだ少ないのが問題です。
また、WordPressではそもそもWebP形式の画像をアップロードできません。

というわけで今回は、WordPressプラグインの「EWWW Image Optimizer」を使って、既にアップロードしている画像をWebPに変換して、WebPに対応しているブラウザにのみ表示させる方法をまとめておきます。

EWWW Image Optimizerのインストール

WordPress.org

EWWW Image Optimizer

https://ja.wordpress.org/plugins/ewww-image-optimizer/

Speed up your website and improve your visitors' experience by automatically compressing and resizing images and PDFs.

WordPressのプラグインの新規追加から「EWWW Image Optimizer」をインストールして有効化しましょう。
有効化したら［設定］→［EWWW Image Optimizer］から設定ができます。

ちなみに、EWWW Image Optimizerは「Compress JPEG & PNG images」という別の画像圧縮プラグインと相性が悪いらしく、両方共有効化していると不具合を起こす可能性があるようです。

どちらか片方で十分なので、Compress JPEG & PNG imagesは無効化するか削除するかしておきましょう。

WebPの変換設定

［設定］→［EWWW Image Optimizer］へ移動して「WebP」タブを開きます。

あとは「JPG, PNG から WebP」の部分にチェックを入れて「変更を保存」をクリックします。

すると画面の下の方にリライトルールが表示されるので「リライトルールを挿入する」をクリックして設定を追加します。

もし、既に.htaccessに色々設定を加えてしまっている場合は、表示されているコードをコピーして.htaccessへペーストしましょう。

既にアップロードしている画像を最適化

今までアップロードした画像を最適化 + WebPに変換するには［メディア］→［一括最適化］で最適化を行います。

「最適化を強制」にチェックを入れて、「最適化されていない画像をスキャンする」で画像のスキャンをした後、「最適化を開始」をクリックします。

これで全ての画像が最適化され、WebPに変換されます。

WebPに変換されているかの確認

Webページにアクセスして画像を確認しても、拡張子は「.png」か「.jpg」のままです。

しかし、サイト上の画像をFinderにドラッグアンドドロップすると「.webp」の拡張子でローカルにダウンロードされるはずです（右クリックから［画像を保存］だと、拡張子を指定して保存になってしまうため、「.png」か「.jpg」で保存されてしまいます）。

WordPressの［メディア］→［ライブラリ］も「.png」や「.jpg」のままですが、ちゃんと変換されていますし、新しくアップロードした画像に関してもちゃんとWebPに変換されていますので、ご安心下さい。