EWWW Image Optimizerを使ってサイトをWebP対応させようと思い立ち、調べたところ、なんだか日本語でその辺について書いてあるサイトが少なく、Englishのドキュメント等を参照することになりました。
それで色々ありましたが、一応対応できたので、防備録がてら手順を書いておきます。
広告
WebPとは？
Googleが開発した画像フォーマットです。場合によりますが、それなりの圧縮率が実現できるらしいです。
特筆すべきは、jpegやpng画像をWebPに変換すると、ほぼ劣化無しでファイルサイズを軽くできる場合が多い、ということ（なぜ「場合が多い」と書くかというと、何事にも例外はつきものだからです。場合によってはファイルサイズが大きくなるときもあるみたい）。
ならコレを使うとお得じゃないか、と思うかもしれませんが、この形式、最近できたフォーマットだけあって、サポートしているブラウザが少ないのです。
Googleが開発したフォーマットだけあってChromium系はだいたいサポートしているのですが、IE, Edgeのみならず、Firefoxでもサポートされていません。
いくらChromeのシェアが高くなってきたといっても、これは無視できるものではありませんので、ブラウザ別に画像を出し分ける対応が必要になるのです。
EWWW Image OptimizerでWebP画像を生成し、サイトに適用する
さてそんなWebPですが、圧縮ツールなどはGoogleから提供されていたりして、変換サイトやツールも結構ある模様です。
WordPressの画像系プラグインでも、WebPへの変換をサポートしているものが結構あったりします。
それで、私が使っている画像の最適化系プラグインの中でも有名なEWWW Image OptimizerもWebPへの変換をサポートしていたので、使ってみることにしました。
手順
手順は簡単に書くと、以下の通りです。
- 「設定」→「EWWW Image Optimizer」の「WebP 設定」から「JPG、PNGをWebPに」オプションにチェックして設定を保存
- .htaccessファイルの書き換え
- 全ての画像を再び最適化
1.ではEWWW Image OptimizerがWebP画像を生成するようにするための設定です。殆どの日本語の紹介ブログではこのあたりはあまり効果のないものとして言及はなかったのですが、使いたい人はここにチェックを入れると、WebP画像を生成してくれます。
2. では.htaccessファイルを書き換えます。
WebP画像を生成する、をチェックして設定を保存すると、.htaccessファイルに書き加えるべき内容が設定画面に出力されます。
「その内容を.htaccessファイルに書き加える」旨のボタンがその付近にあるはずです。.htaccessを直接編集しない場合はそのボタンを押してコードを.htaccessファイルに追記し、.htaccessファイルに直接書き加えたい場合はそのコードをコピペして.htaccessファイルの編集時に貼り付けます。
なお、私の環境ではどうやらプラグインを通して追記した位置ではうまく動かなかったのですが、.htaccessファイルを直接エディタで開いて、「# BEGIN WordPress」より前になるようにコードを写したらうまくいきました。
3. では、WebPを全ての画像に対して生成するために、「メディア」から選べるEWWW Image Optimizerの「一括最適化」から、最適化済みの画像も再び最適化するように設定して、画像の再最適化を行います。
特に再び最適化しなくてもいいだろうかとも思ったのですが、どうやら裏でWebPに変換するプロセスも走っている気配がないため、念のため私は全部一括最適化しました。これをおこなうことで、おおよその画像にWebP形式が生成されるはずです。
確認
ディベロッパーツールの「Network」の「Img」にて、（画像の拡張子は変わらないのですが）Typeがwebpになっていれば成功です。
LiteSpeed Cacheと組み合わせる場合
LiteSpeed Cacheと組み合わせる場合、.htaccessの書き換えをLiteSpeed Cacheで行うこともできます（どちらかというと私はこちらの手順のほうが好きです）。
手順としては、「設定」→「LiteSpeed Cache」もしくは「LiteSpeed Cache」→「設定」で出てくる設定画面の「メディア」タブから、「WebP画像への置換」を「オン」にするだけ。とても楽です。
こちらの場合、拡張子ごと置き換えられます。
私としては、こちらのほうがわかりやすいので、好きです。多分CDNを使うときも役に立ちそうですし…。
その他コメントなど
EWWW Image Optimizerを使うことで、WebPには比較的簡単に対応できます。
WebPの導入を簡単にするCache Enablerプラグインもありますが、LiteSpeed Cacheや別のキャッシュプラグインとの衝突の可能性を気にする場合などに、EWWW Image Optimizer等の画像プラグインでWebP対応を行うのは結構お勧めではないかと思いました。