なんでもノート

なんでも書くノートみたいなブログ

WebP対応ブラウザかサーバーサイドで判定する

WebP対応ブラウザかどうかをサーバーサイドで判定する方法を調べた。

判定方法

Webサービス上の画像変換とWebPの利用について | メルカリエンジニアリング が分かりやすかった。

おそらく最も一般的なのがAcceptヘッダーを使う方法だと思います。
...(中略)...
この中にimage/webpが含まれるため、サーバー側はWebPを使用できるクライアントだと判定できます。

実装方法

Node.jsで実装するとしたら以下のようになりそう。

  const { accept: acceptHeader } = req.headers ?? {};
  const isWebPSupported = acceptHeader?.includes("image/webp");

(自分はindexOfよりincludesが好み)

調査

自分のMacChrome 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ヘッダーの挙動も確認できた。

まとめ

  • Acceptヘッダーに image/webp が含まれているかでWebPに対応しているかを判定できる
  • Big Sur以降、SafariもWebPに対応している
  • ブラウザーは取得するリソースに応じてAcceptヘッダーに異なる値を設定する