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




既存プロジェクトにCompassが導入されている場合に備えて、最低限Sassのコンパイルだけでも行えるようにしておく
Visual Studio Codeを使ったコード整形方法(Fomatter)
Nuxt.jsでaxios-moduleを使ってAPIからデータを取得・表示する|Nuxt.jsの基本
ブラウザでこれ以上スクロールできない場合の挙動を制御する「overscroll-behavior」プロパティ
Vue.jsでtemplateタグ内にscriptやstyleタグを生成する方法|Tags with side effect are ignored
WordPressのカスタム投稿タイプを追加後、ページは存在しているはずなのに404になる場合の解決方法
JavaScriptで簡単にCookie操作ができるライブラリ「js-cookie」
Post Snippetsを使ってWordPressでショートコードをの登録と管理をもっと楽に!!
Nuxt.jsで「Classic mode for store/ is deprecated and will be removed in Nuxt 3.」のエラーメッセージが表示される場合の対処法
WordPressで「予約投稿の失敗」となってしまう場合の対処方法
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法