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





WordPressでbloginfo()の一部パラメーターの廃止・非推奨に注意!
Visual Studio Codeでファイル差分の比較を行う方法
SourceTreeでマージ時に「fatal: You have not concluded your merge (MERGE_HEAD exists).」と表示される場合の対処法
JavaScriptのforEach内で「continue」や「break」のような動作をさせる方法
Google Maps APIでピンをクリックしたときに吹き出しを表示する方法
CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ
Visual Studio CodeをMarkdownエディターとして使用する
ウェブ上でLaTeXで数式をキレイにプレビューするJavaScriptライブラリ「MathJax」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
【2026年版】Karabiner-Elementsで実現する右commandキー活用のススメ
Bartender ProのTop Shelf機能でできること
高機能なスクリーンショットアプリ「CleanShot X」
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集