WebPの変換をNGINXで設するお話

画像の形式はいろいろありますが、まだまだpngやjpgがメインだと思われます。

デザイン関係は本当にわからんのですが画像フォーマットの勉強だけはしておきたいです。

WebP変換は以前からやっていたのでおさらいがてらに。

WebP設定

WordPressだとプラグインでサクッとできるらしいですが、速度とかに影響しそうな気もするのでサーバ側でやってあげたほうが親切かもしれません。

設定することとしては、WebPに対応しているブラウザにはWebPで、非対応のブラウザにはpngやjpgで表示させる、という感じです。

参考

Getting Started with WebP Images - EWWW IO Support

Unlike the other conversion options, WebP conversion is possible for every PNG, JPG, and GIF image on your entire WordPress site. It is not limited to the Media

docs.ewww.io

# server外
map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

# server内
    location ~* ^/images/.+\.(png|jpg)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }

serverの外側にmapでwebp_suffixという変数を作成しておいてフォーマットがwebpだったら拡張子をセットします。

あとはlocationで変数を追加するように指定してあげます。

拡張子を追加じゃなくて置換する方法もあるみたいですが、ソースごちゃごちゃするしif使ってるしであまりよろしくないっぽいです。

記述できたらブラウザの検証機能で拡張子確認して完了でございます。

古いサーバだとmimeにwebpが無いらしいので追加が必要です。

画像を大量に使っているサイトだと速度に影響はあるみたいですが、小規模なサイトだとあんまり実感できない程度かと思われます。

まぁ設定しておいて損はないのでデフォルトで反映させておきたいですね。