次世代の画像フォーマット

更新（2021/08/07）

SafariがWebPに対応したので、これからはWebP一択ですね！やったね！！

（更新箇所終了）

題名の通り次世代の画像フォーマットについての記事です。
次世代の画像フォーマットは具体的にWebPとJPEG 2000とJPEG XRがあります。
余談ですが自分は対応は見送ります。やってみたら大して軽量化にならないことがわかったので...

そもそもWebPとJPEG 2000とJPEG XRって何者？

WebP

WebPとはGoogleが開発した静止画フォーマットです。
対応ブラウザはIEとSafariを除くほとんどのブラウザです。
対応状況は世界で約78.83%、日本で44.3%です。

日本はAppleユーザーが多いため世界より対応状況が低い結果になったのだと思われます。

JPEG 2000

JPEG 2000はJoint Photographic Experts Groupが開発した静止画フォーマットです。
対応ブラウザはSafariです。
対応状況は世界で約13.65%、日本で44.49%です。

やはり日本のAppleユーザーは多いですね。私もですけど。

JPEG XR

iPhone XRじゃないですよ。
開発元はさっきと同じJoint Photographic Experts Groupです。
対応ブラウザはIEとEdgeです。
対応状況は世界で4.87%、日本で8.56%です。

まとめ

これだけ見ると全部実装して分岐して処理すればいいジャーンって思いますよね？でもそれはよろしくないです。実はSafariが対応しているJPEG 2000に大きな問題があります。この子は困ったことに変換すると既存のファイルよりも容量が大きくなってしまいます。また、JPEG XRについてもIEからEdgeに変わりつつあるのでわざわざ実装する必要性はないと思います。Appleさんが負けを認めてWebPに対応するまでは様子を見たほうがいいかもしれません。

じゃあどうする？

WebPとJPEGだけで実装する方法です。
source要素というのがHTML5で実装されました。それを使います。

<picture>
   <source type="image/webp" srcset="hoge.webp">
   <img src="hoge.jpg" alt="ホゲホゲ">
</picture>

Appleさん意地にならないでよ〜