タイトル通りの記事になります。nginxで次世代画像フォーマットのwebpを使ってみようと思ったのですが上手くいっているのかいってないのかわからなくなりました。

なぜ？

設定してもwebpを返していないけれど、Googleのスピードテストをしたら次世代画像フォーマットが合格していたからになります。
僕としても、これは何故？どうなっているのか？となります。

今回の記事の設定をしても参考にならない

今回設定内容はでてきますが、参考にならないかもしれません。

サーバー環境

管釣り.comのサイトのサーバーを使います。

• ベンダー：さくらのクラウド
• OS：CentOS7
• ミドルウェア：nginx+apache
• PHP：使用していない。
• WordPRess：使用していない

こんな感じです。余談としてなぜ次世代画像フォーマット を使おうと思ったのか載せておきます。また、今回の環境はリバースプロキシを使用しております。

スペックが低いのでレスポンスが遅い

これにつきます。スマートフォンなどで見ると画像の表示に時間がかかるなーと思う時がございます。PCでもLPを見ると画像が途中で表示されなくなったり課題だなと思っています。
スペックをあげればすむ話ではありますが、残念ながら管釣りのサイトは収益としては全くないため、サーバーの増強をしてさらに赤字になると廃業になるのでできません。

IPv6にも非対応

さくらのクラウドはIPv6使うにはルーター+スイッチを契約しないといけません。月額で4,000円近くするため、サイトラボの稼ぎでは契約することはできません。

次世代画像フォーマットを使って高速化

残念ながら増強したり、IPv6通信でレスを速くするなどできないため、画像を次世代画像フォーマットにすることでちょっとでも速く表示されるかなと思った邪な気持ちでございます。

管釣りのサイトが売上げ（広告収益）があがったり、スポンサーがついていただけると楽になるかも知れませんがまだまだ先な事かもしれません。なので低コストでできるだけ高速になるように心がけております。

webpとは何か？

次世代画像フォーマットと言われている規格となります。詳しくは検索してください。Google検索で1番目か2番目の記事を見ればなんとなくわかります。それで十分です。

使うメリットは？

jpegとかpngよりも圧縮されているため、画像を速く返せます。ユーザーも通信量が減るという互いにメリットがあります。

デメリットは？

AppleのSafariは非対応というのがあります。世の中PCはChromeやfirefoxがありますが、日本においてはIEという素晴らしきブラウザと、iPhoneという素晴らしき端末が多く存在しております。iPhoneのChromeもSafariと同じエンジンを使っているため、webpが表示できないという事になります。

どうやって確認するのか？

Chromeやfirefoxの開発ツールを見ます。レスポンスの content-type: が content-type: image/webp となっていればよいみたいです。
※サーバー側で設定した場合になります。

また、サーバー側で設定する場合は同一フォルダに画像を二ついれる必要があります。

• sample.jpg
• sample.jpg.webp

上記は、sample.jpgという画像と、sampleのwebp版の二つの画像が用意されております。非対応ブラウザ（Safari等）の場合はsample.jpgを返し、Chromeなど対応版はsample.jpg.webpを返しwebpの画像になるという事になります。

Appleがwebpに対応してくれれば、一気に普及するかもしれないフォーマットですがAppleは今のとこ非対応となっております。そのため技術者としては困っているのもあります。使いたくても使えないという状況ですね。今後Appleの考えが変わり、ユーザーの事を考えてiOSを開発してくれる事を祈るばかりです。

状況

話は戻って、管釣りはnginx+apacheのリバースプロキシを使っております。そしてサーバーがしょぼいので画像を次世代画像フォーマット対応してちょっとでも通信量を減らしていこうというのになります。では実際に設定をしていったのでやっていこうと思います。

htaccessで設定

リバースプロキシを使っておりますが、htaccessは問題なく使えます。
[c]
<Directory "/var/www/html">
#DirectoryIndex index.php
AllowOverride All
Require all granted
</Directory>
[/c]

このようにドキュメントルートにhtaccessを使える用に設定をしております。本当に使えるか？と疑問に思うかも知れません。そこでApache2.4でhtaccessが使えないときに確認する方法を見てhtaccessの設定をいれてみました。
[c]
AuthType Basic
AuthName hoge
Require valid-user
[/c]

ベーシック認証は表示される

ここに画像をいれる

ちゃんとベーシック認証が表示されました。htaccessは有効化されているのがわかります。

htaccessでwebpの設定をいれてみる

管釣りはhtaccessを使っていないため、特に競合などおきませんのでhttps://kantsuri.com/outdoor/charcross.htmlをのhtaccessを使ってみました。

[c]
<IfModule mod_setenvif.c>
# WebP版があるかもしれない画像へのリクエストは全てVaryレスポンスヘッダを返す
SetEnvIf Request_URI "\.(jpe?g|png)$" _image_request
</IfModule>

<IfModule mod_rewrite.c>
# Rewriteモジュールを有効にする
RewriteEngine On

# ブラウザから送信されるAcceptリクエストヘッダがimage/webpを含む場合のみ
# 後続のRewriteRuleを適用する
RewriteCond %{HTTP_ACCEPT} image/webp

# WebP版のファイルがある場合のみ後続のRewriteRuleを適用する
# SCRIPT_FILENAMEを使うことでサブディレクトリの補完が不要に
RewriteCond %{SCRIPT_FILENAME}.webp -f

# *.jpg、*.pngファイルを*.webpファイルに内部的にルーティングする
# Content-Typeはimage/webpにする
# リダイレクト先は $0.webp でも可
RewriteRule .(jpe?g|png)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>

<IfModule mod_headers.c>
# 環境変数_image_requestが真の(上記SetEnvIfが設定された)場合、
# VaryレスポンスヘッダにAcceptを追加する
Header append Vary Accept env=_image_request
</IfModule>

<IfModule mod_mime.c>
# 拡張子.webpファイルはContent-Typeとしてimage/webpを返す
AddType image/webp .webp
</IfModule>
[/c]

これを実際にアップしてみます。

htaccessなのでapacheの再起動などは必要ございません。