5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-07-17

更新(2021/08/07)

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

(更新箇所終了)

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

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

WebP

WebPとはGoogleが開発した静止画フォーマットです。
対応ブラウザはIEとSafariを除くほとんどのブラウザです。
対応状況は世界で約78.83%、日本で44.3%です。
6735A517-1D99-4ABD-B113-592C27AC13D9.jpeg
日本はAppleユーザーが多いため世界より対応状況が低い結果になったのだと思われます。

JPEG 2000

JPEG 2000はJoint Photographic Experts Groupが開発した静止画フォーマットです。
対応ブラウザはSafariです。
対応状況は世界で約13.65%、日本で44.49%です。
16731FCC-E6EF-42B7-B0A4-09BA61FB7514.jpeg
やはり日本のAppleユーザーは多いですね。私もですけど。

JPEG XR

iPhone XRじゃないですよ。
開発元はさっきと同じJoint Photographic Experts Groupです。
対応ブラウザはIEとEdgeです。
対応状況は世界で4.87%、日本で8.56%です。
E44D514E-0C95-4829-802B-73F2F49CA6FB.jpeg

まとめ

これだけ見ると全部実装して分岐して処理すればいいジャーンって思いますよね?でもそれはよろしくないです。実は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さん意地にならないでよ〜

5
5
0

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
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?