Open2
Nginx + WordPressにおいてのWebP化対応
ブッチ大きく分けてすることは2つ。
- 既存の画像をWebPに変換する
- WebPをブラウザで読み込めるようにする
既存の画像をWebPに変換する
WordPressの場合はプラグインを使えばOK。
王道なプラグインのリンクを貼っておきます。
EWWW Image Optimizer
EWWW Image Optimizerを使う場合は設定項目にWebPに変換してくれる項目があるので、そこにチェックしたら終わり。
WordPressでwebp（ウェッピー）画像を使う方法（Apache、Nginx対応：WordPress高速化チューニング）
WebPをブラウザで読み込めるようにする
WebPを読み込めるようにするにはサーバ側の設定変更も必要である。
またApacheかNginxでやる事は異なる。
Apacheの場合は以下記載の.htaccessかconfに記載してあげればいい（雑
ここでやりたいことは「ブラウザがWebPに対応していれば、WebPを表示するようにする」
以下はEWWW Image OptimizerのWebP対応する項目に貼ってある記述を整理した。
<IfModule mod_rewrite.c>
RewriteEngine On
# AcceptRequestHeaderにimage/webpが含まれているか
# ここでWebP対応ブラウザかを判定する
RewriteCond %{HTTP_ACCEPT} image/webp
# ファイル名にjpe・jpeg・png・gifが含まれている
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
# 対応するWebPの画像ファイルが存在する
RewriteCond %{REQUEST_FILENAME}\.webp -f
# type=originalのクエリパラメータが存在しない時
# これはなぜ必要なのかはわからなかった
RewriteCond %{QUERY_STRING} !type=original
# ファイル名の末尾に.webpを追記する
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
# CDNやキャッシュサーバがWebPとjpeg・pngを別々にキャッシュできるようにする
Header append Vary Accept env=REDIRECT_accept
</IfModule>
# WebPの拡張子をMIMEタイプに登録
AddType image/webp .webp
メモ
RewriteCond %{HTTP_ACCEPT} image/webpでやっていること
Accept に受信可能なメディア対応が記述されている。
WebPに対応しているブラウザなのかはここの値を見ればわかる。
**RewriteCond %{REQUEST_FILENAME} !-f**の意味
-f が「ファイル」、! が否定なので、「ファイルが存在しない場合」
Nginxの時
MIMEタイプに登録されているかを確認する
自分はmime-types.conf.hbsで確認
types {
...略
image/webp webp;
}
WebPを読み込めるようにする
ファイル名はプロダクトによって違うかと思います。
今回はsite.conf.hbsに追記
# Acceptリクエストヘッダにimage/webpが含まれていたら$webp_suffix変数に".webp"を代入
map $http_accept $webp_suffix {
default "";
"~*image/webp" ".webp";
}
server {
listen {{port}};
root "{{root}}";
# jpe・jpeg・png・gifで終わるリクエストの時
location ~* ^.+\.(jpe?g|png|gif)$ {
add_header Vary Accept;
# WebP対応ブラウザでは、webpのファイルと通常の画像（jpeg・png）ファイルを探す
# WebP非対応のブラウザでは、通常の画像ファイルを探す
# いずれもない場合は404を返す
try_files $uri$webp_suffix $uri =404;
}
CloudFrontを使っている場合は、Whitelist Headersの設定を触る必要がある。
今回は対応が必要なかったので割愛。