javaScriptでwebpを使いたーい

はじめに

iOS14/macOSビッグサーのsafariがwebpに対応したということで、そろそろwebpを使って行こうかと思ったのですが、なんとjsからwebp使用判定ができず。

いやjsで使いたいんだもん。jsアプリを作ってるんだし。
なんできないねん。

acceptヘッダ？ pictureタグ？
こんなこと言われてもね。

対応できた

なんとか対応できました。

非表示のimgタグにbase64にした小さいwebpを埋め込んで、エラーハンドリングして確認。
scriptタグはその下へ移動。

    <div style="visibility: hidden;">
        <img src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEACkC4JaQAA3AA/uZQAAA=" width="1" height="1"
            alt="" onload="webP=true;console.log('webp OK');" onerror="webP=false;console.log('webp NG');">
    </div>
    <script defer src="xxx.js"></script>

こうだね。
結構タイミングが狂うので、onloadも取ってチェックした方がいい。
iOS12とかのonerrorは結構タイミングが遅い。iOS14のonloadは割と早いけど、jsがキャッシュされてると、そっちの方が早かったりする。onloadのみでいいってことになる。

今回も手抜きな感じ