続・WebP対応ブラウザを判定する

WebP対応ブラウザかサーバーサイドで判定する - なんでもノートでWebP対応ブラウザをサーバーサイドで判定する方法を調べた。Acceptヘッダーに image/webp が含まれているかどうかで判定する方法をまとめた。

これ以外にUser-Agentで判定する方法がある。WebP image format | Can I use... Support tables for HTML5, CSS3, etcでWebPをサポートしているブラウザを確認し、文字列比較で判定する。ユーザエージェント文字列のパースの手間があるし、仕様をしっかり把握していないので個人的には正直やりたくない。

クライアントサイドで判定する方法はこれまたWebサービス上の画像変換とWebPの利用について | メルカリエンジニアリングにあった。

以下のように1px四方のWebP画像をJavaScript経由で書き込んでみて、画像として認識されるかを確認します。もし画像として認識されれば画像サイズが取得できるはずです。 javascript var img = new Image(); img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA'; console.log(img.witdh); // 1

ChromeのConsoleで実行してみたところ、1が出力された。

また、WebP – Webを速くするためにGoogleがやっていること Make the Web Faster 01 – | HTML5Experts.jpによると、以下の方法もあった。

まず、Modernizr.jsには、ブラウザのWebPサポートを調べる機能があります。 これを用いて、読み込む画像をJavaScriptで動的に切り替えることができます。 if (Modernizr.webp) { // WebP を読み込む } else { // PNG を読み込む }

Modernizr.jsというライブラリを使えば簡単に判定できそうだった。GitHub - Modernizr/Modernizr: Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/img/webp.jsを見ると、おそらくModernizr.jsも同じ方法でWebP対応判定をしているようだった。