iPhoneでwebpが表示されない

備忘録 兼 戒め

問題

index_before.html

<h1 class="p-index__head">
  <picture>
    <source srcset="./assets/pc.webp" media="(min-width: 767px)">
    <source srcset="./assets/sp.webp" media="(max-width: 766px)">
    <img src="./assets/sp.png">
  </picture>
</h1>

PC上のコンソール(Chrome)では表示されるのにiPhone実機では表示されなかった。
iPhoneだけじゃないかもしれない(自分で確認できたのはiPhoneだけだった)。

前提
・画像のパスは間違ってない
・iPhoneはwebp対応しているバージョンのOS

解決

source要素にtype="image/webp"を追加する。

index_after.html

<h1 class="p-index__head">
  <picture>
    <source type="image/webp" srcset="./assets/pc.webp" media="(min-width: 767px)">
    <source type="image/webp" srcset="./assets/sp.webp" media="(max-width: 766px)">
    <img src="./assets/sp.png">
  </picture>
</h1>

何故かtypeの記述がなくても動く場合があって、その時のコードをコピペしていたせいで今回のエラーに気づいた。
エラーが起きるときと起きないときがあるのが一番困るけど前提としてリファレンス通りに書こうねってことで…