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

WebPはGoogleが開発した画像形式で、簡単に説明すると「JPEGのように軽く、PNGのようにアルファチャンネル(透過)に対応した画像」です。
JPEGとPNGのいいとこ取りをしたような画像形式なのですが、対応ブラウザがまだまだ少ないのが問題です。
また、WordPressではそもそもWebP形式の画像をアップロードできません。
というわけで今回は、WordPressプラグインの「EWWW Image Optimizer」を使って、既にアップロードしている画像をWebPに変換して、WebPに対応しているブラウザにのみ表示させる方法をまとめておきます。
EWWW Image Optimizerのインストール

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に変換されていますので、ご安心下さい。




Dart Sassでファイルを分割して管理する方法|Dart Sass入門
WordPressのプラグインはどれを入れたら良い?とりあえず最初に導入をオススメするプラグイン一覧
MAMPでローカル開発環境にWordPressをインストールする手順
HTMLが書ければすぐ習得できるテンプレートエンジン「EJS」の基本的な書き方
Nuxt.jsでページを作成・追加する方法|Nuxt.jsの基本
Font Awesome 5の基本的な使い方と、Font Awesome 4との違い
EJSのincludeで別ファイルを読み込むときの画像パスを指定する方法
Nuxt.jsでaxios-moduleを使ってAPIからデータを取得・表示する|Nuxt.jsの基本
横幅が広がったときの挙動が変わる!CSS Gridの「auto-fill」と「auto-fit」の違い
WebPに対応して画像サイズを最適化する方法
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」