WordPress+nginxのWebP対応
画像多めのメディアサイトでパフォーマンスの調整をしている今日この頃。
PageSpeed Insightsのモバイルスコアを上げるためWebP対応をすることになった。
WebPとは
Googleの作った圧縮率の高い次世代フォーマット。
「ウェッピー」と読むらしい。
既存のPNG、JPEG、GIFなどと同じ非可逆圧縮で、透過やアニメーションをサポートしている。
よってWebPがあればウェブの画像はほぼOKというスペックになっている。
ただしMacではSafari、WindowsではIE11が対応していない、という互換性の問題があるため、残念ながらWebPだけでサイトを運用するのはいまだ現実的ではない。
WebPのメリットを享受しつつも互換性を維持するためには同じ画像についてPNGやJPEGも準備しなければならないという状況になっている。
プラグインでPNGやJPEGをWebPに変換
WordPressのサイトでWebPに対応するにはプラグインを導入するのが簡単。
いくつかあるが今回はEWWW Image Optimizerを使った。
このプラグインの以下の機能でアップロードしたPNGやJPEGからWebPを生成する。
- 過去にアップロードした既存の画像から一括でWebP画像を生成できる
- プラグイン導入後に画像をアップロードすると自動でWebP画像が生成される
生成されたWebP画像がどこに置かれるかはプラグインによって違うが、EWWW Image Optimizerの場合は順当に元画像と同じディレクトリにファイルができる。
ファイル名は元画像がhoge.jpgであればWebP画像はhoge.jpg.webpとなる。
サムネイルなどすべての画像サイズのWebPが作られる。
最近は隙あらば脱WordPressを模索しているけれども、こういうのをプラグインでサクッと対応できるのはWordPressの強味ですな。
なおプラグインに頼りたくない場合はLambda@Edgeなどを使ってインフラのレイヤーで変換するといった手法もある。
nginxの設定
Apacheの場合はだいたい.htaccessのリライトでよきに計らってくれるが、nginxだとそういうことができないので
- WebP対応ブラウザにはWebPを返す
- WebP非対応ブラウザにはPNG、JPEGを返す
といった設定をしてやる必要がある。
map $http_accept $webp_suffix {
default "";
"~*image/webp" ".webp";
}
server {
（略）
location ~* ^.+\.(png|jpe?g)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}
（略）
}かなり古くから運用している場合はmime.typesにwebpがないかもしれないので、そういう場合は追加してやる（ほぼあると思うが）
types {
（略）
image/webp webp;
（略）
}CloudFrontをかましている場合
ブラウザの対応状況によってWebPの出し分けが効くように、ビヘイビアのWhitelist HeadersにAcceptを追加。
WebPの配信確認
サーバーサイドの設定が終わったらブラウザでアクセスして、ChromeとIE11（MacならSafari）のデベロッパーツールでNetworkのとこを確認。
同じpngやjpgの拡張子のファイルのTypeがChromeであればwebp、IE11であればpngやjpgになっていればOK。
Chromeでもwebpになっていなかったり、IE11で画像が表示されていなかったりした場合は設定をミスってるので修正のこと。
PageSpeed Insightの確認
残念ながらあんまりスコアは上がらなかった。
推奨項目として大きく出してくるのでけっこう変わるのかと思いきや。拍子抜け。
しかしまあ考えてみればPNGやJPEGと比べて容量が小さいとはいえ劇的に変わるわけでもなし。
そんなものかと。
トラフィックの少ない小さいサイトではそれほど重視する項目ではないかも。
しかしながら大きなサイトだとチリツモで転送量が抑えられるのはありがたいかも。
