WebP対応ブラウザかどうかをサーバーサイドで判定する方法を調べた。
判定方法
Webサービス上の画像変換とWebPの利用について | メルカリエンジニアリング が分かりやすかった。
おそらく最も一般的なのがAcceptヘッダーを使う方法だと思います。
...(中略)...
この中にimage/webpが含まれるため、サーバー側はWebPを使用できるクライアントだと判定できます。
実装方法
Node.jsで実装するとしたら以下のようになりそう。
const { accept: acceptHeader } = req.headers ?? {}; const isWebPSupported = acceptHeader?.includes("image/webp");
(自分はindexOfよりincludesが好み)
調査
自分のMacのChrome 92のAcceptヘッダーは以下だった。
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
image/webp
が含まれている。
Safariバージョン14.1のAcceptヘッダーは以下だった。
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
image/webp
が含まれていない。
WebP image format | Can I use... Support tables for HTML5, CSS3, etc によると
Partial support in Safari refers to being limited to macOS 11 Big Sur and later.
あれ、Big Surなんだけどな...。
WebP対応している クックパッド からはWebP画像をダウンロードしていることが確認できた。
Accept - HTTP | MDN によると
ブラウザーはリクエストを行う場面に応じて適切な値をこのヘッダーに設定します。 CSS スタイルシートを取得するときは、画像、動画、スクリプトを取得するときとは異なる値をリクエストで設定します。
画像を取得するときのAcceptヘッダーを確認したところ以下だった。
image/webp,image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
image/webp
が含まれていた!最初はHTML取得時のAcceptヘッダーを確認していた。ブラウザーの取得するリソースに応じたAcceptヘッダーの挙動も確認できた。