[WordPress 5.8以降]とても簡単な Webp 対応（2022年度版）

WordPress5.8 より Webp という画像フォーマットに対応しました。

Jpg より圧縮率がいい
Png のような透過も使える
扱いやすく、サイト表示速度にも貢献できる（SEOに有利？）

という新時代のベターフォーマットです。

Webp（ウェッピー）って呼び名はちょっといただけない

ただ、Wordpress で扱えるようになったとはいえ、自動的に Webp になるわけじゃありません。
例えば画像ブロックに直接画像をクリップボードからコピーした場合、フォーマットは Jpg になりますし、Webp 対応以前の記事画像は相変わらず Jpg / Png のままです。

uploads フォルダの画像を全て Webp にして、合わせて記事も修正して…尋常じゃない手間がかかるので、考えたくありません。

そこで、プラグインでちょちょいと Webp 対応する方法を試してみました。

EWWW Image Optimizer をインストール

WordPress 5.8 以上であれば EWWW Image Optimizer というプラグインを導入することができます。

新規追加 > EWWW で検索 > EWWW Image Optimizer をインストール＆有効化

インストールしたら今度は インストール済みプラグインを表示 > EWWW Image Optimizer の設定をクリック。

設定ウィザードが表示されます。「サイトを高速化」「保存スペースを節約」「今は無料モードのままにする」をチェックして「次」。

こちらは全てにチェックを入れて「設定を保存」。

WebP変換については「使用ストレージ容量が増えるけどいい？」と聞かれますが「次へ」でOKしましょう。
「匿名の報告」はチェックしなくてもいいですが、EWWW の進化を少しでも手助けしたいと思えばチェックしましょう。

EWWW Image Optimizer を入れてもストレージ容量は節約されない

Webp はサイズが小さくなるのになぜ？　と思うかもしれませんが、EWWW はあくまで「今まで Jpg/Png で表示されていた箇所を（ブラウザが可能なら）Webp で代替する」ツールです。
ストレージ容量的には「今までの Jpg/Png ＋ Webp」となることに注意してください。

.htaccess を編集

WebP の配信方法、という欄のコードを、コピー。

「リライトルールを挿入する」ボタンは押さないでください。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteCond %{QUERY_STRING} !type=original
  RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
  <FilesMatch "\.(jpe?g|png|gif)$">
    Header append Vary Accept
  </FilesMatch>
</IfModule>
AddType image/webp .webp

コピーしたコードを WordPress ディレクトリに置いてある .htaccess の先頭にペースト。
.htaccess はお使いのレンタルサーバーによって設定方法が異なるので、確認してください。

Conoha の場合は サイト管理 > サイト設定 > 応用設定 > .htaccess設定 か、Filezilla などの FTP クライアントツールで直接 .htaccess をダウンロード > 編集 > 上書きしましょう。

編集の仕方を間違えると最悪 WordPress が起動しなくなるので、元の .htaccess はどこかに保存しておくことをオススメします。