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




Post Snippetsを使ってWordPressでショートコードをの登録と管理をもっと楽に!!
gulpでSSI(サーバーサイドインクルード)を使用する「connect-ssi」
WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」の状態でログインできなくなった場合の対処法
js-cookieでウェブサイトのダークモード表示設定をユーザーごとに保存しておく方法
iTerm2で起動時に左上に表示される「Tip of the Day(今日のTip)」を非表示にする方法
Webサイト制作の基礎の基礎、HTMLって何?
Vue Routerでページ遷移後にトーストを表示させる方法
Neovimを使い始める最初の一歩として便利な「LazyVim」
Bracket Pair ColorizerでVisual Studio Codeの括弧を色分けして見やすくする
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
スクロール時に表示領域に画面がくっつくようになる処理をCSSだけで実現する「scroll-snap」
Path Finder 8で動作がおかしいと思ったときにチェックすること
スニペットとしてもドキュメント検索としても使える「Dash 6」でコードや定型文を管理する
さまざまな情報を一元管理するオールインワンのワークスペース「Notion」
CSSでclassがついていないタグにだけスタイルを当てる方法
HyperSwitchをインストールしておくと「隠す(command + M)」で隠したウインドウもすぐ開けるようになる
Alfredで複数のアプリケーションを一括で起動するWorkflowの作成方法
Orbital 2と修飾キーの同時押しで、別のショートカットキーを発火させる方法
Visual Studio CodeでDart Sassのコンパイルができる拡張機能「DartJS Sass Compiler and Sass Watcher」
デュアルディスプレイの際にAlfredの検索ボックスをマウスがある画面に表示させる方法