ブラウザがwebp対応か確認する手っ取り早い方法

TL;DR

多分これが一番早いと思います

        //webp環境のチェック
        function checkWebP() {
          return new Promise(res => {
            const webP = new Image();
            webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
            webP.onload = webP.onerror = function () {
              res(webP.height === 2);
            };
          })
        };
        checkWebP().then((result) => {
          if (!result) {
             //結果の確認
             console.log('webp:' + result)
          }
        });

解説

ポイントは二つ。

• webp画像を直接生成する
  大きさ2ドットのwebp画像を直接生成する(const webP～ webP.onloadの部分 ) 。
  実際にサンプル用のwebp画像を用意して読み込めるかを確認しても良いが、こちらほうが画像をロードする時間がかからず、高速。
• Promiseを使う
  Image().onloadは非同期に実行する必要がある。

実行結果

• chromeの場合

webp:true

• safariの場合

webp:false