search
LoginSignup
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

はじめに

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のみでいいってことになる。

今回も手抜きな感じ:relaxed:

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1
Help us understand the problem. What are the problem?