iOS版SafariがWebP画像をサポート、でもMacOS版はまだ

[レベル: 中級]

iOS 版 Safari が WebP をサポートしました。
しかしながら、MacOS 版 Safari は未サポートのままです。

iOS 版 Safari が WebP を表示

こちらは、JPEG 画像です。
みんな見えているはずです。
🐶JPEG

こちらは、WebP 画像です。
ブラウザによっては見えていないかもしれません。
🐶WebP

iOS 版 Safari 14 が WebP をサポートしたので、どちらの画像も表示できます。

WebP を表示できる iOS 版 Safari 14

Safari が WebP に対応したのはとても嬉しいニュースです。
WebP 利用の最も大きな懸念がなくなりました。

ところが……

MacOS 版 Safari はサポートせず

MacOS 版(デスクトップ版)の Safari は バージョン 14 でも WebP に対応していないままです。
表示できていません。

WebP を表示できない MacOS 版 Safari 14

インスペクタを見ると WebP には読み込みエラーが出ています。

WebP 読み込みエラー

どうやら、Mojave と Catalina の Safari 14 では WebP を表示できないようです。
次バージョンの MacOS である Big Sur だと Safari 14 でも WebP を表示できるようです。

Can I use

それでも Safari の WebP サポートは歓迎

WebP のサポートもモバイルファーストなんですかね?

それはともかくとして、iPhone(と iPad)だけであっても Safari が WebP をサポートしたのは歓迎すべきアップデートです。
特に画像が多いページでは、読み込みの高速化に役立ちます。

Mac の Safari でのサポートはもうしばらく先になりそうですが、どのみちすべてのブラウザが WebP をサポートしているわけではないのでフォールバックは依然として必要です。

<picture>
    <source type="image/webp" srcset="dog.webp">
    <source type="image/jpeg" srcset="dog.jpg">
    <img src="dog.jpg" alt="🐶" width="640" height="480" />
</picture>