webpとは、Googleが開発している静止画用のフォーマットです。PC版ChromeでGoogle Playを見ると、スクリーンショットに使われていたりします。

pngに比べサイズが小さくなるのですが、Webで使用する場合、FirefoxやSafariが執筆時点(2015-5-7)でサポートしていないので、ブラウザを判定して

• 未対応ブラウザの場合はHTMLを差し替える
• 未対応ブラウザの場合はpngを代わりに返す

といった対応が必要になります。

ここでは、後者の「未対応ブラウザの場合はpngを代わりに返す」方法をnginxの設定でやってみることにします。

前提

webpとpngはicon.webpとicon.pngのように、同じファイル名で拡張子だけ異なるとします。

conf.d配下を編集する

default.confやssl.confに、次のようなエントリーを追加します。

server {
    # 中略
    location ~ \.webp$ {
        expires 7d;
        if ($http_user_agent !~* "(Chrome|Opera|Android|Android.*Chrome)") {
            rewrite (.*)\.webp $1.png last;
            expires 7d;
        }
    }
}

「拡張子.webpなリクエストがきた時、UserAgentが指定のもの以外ならpngにする」という、当たり前といえば当たり前なエントリーを追加します。

あとはnginxを再起動するだけ！