BETA

次世代フォーマットでの画像の配信について

投稿日:2018-11-14
最終更新:2018-11-14

知らない間にPageSpeed Insightsが色々と変わっていた。
その中で「次世代フォーマットでの画像の配信」という項目が気になったのでメモ。

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

以下、PageSpeed Insightsの結果ページより引用。

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、
ダウンロード時間やデータ使用量を抑えることができます。

つまり、

  • JPEG 2000
  • JPEG XR
  • WebP

を使えば、PageSpeed Insights的にはOKということらしい。

対応ブラウザは?

じゃあ画像を一気にこの形式に切り替えればOKでは?と思うが、そう簡単にはいかない。
現状、いずれも標準対応しているブラウザが限られているのだ。

JPEG 2000

標準対応は OS X や iOS で動作する Safari のみ。
今の所アップル製品のみということになる。

JPEG XR

米マイクロソフトが開発者ということもあり、Windows Vista以降のOSでは標準対応している。
いわずもがな対応ブラウザはIEとEdge。

WebP

「ウェブピー」と読みたくなるが「ウェッピー」である。なんだこの可愛い感じ。
Googleが開発者だからだろうか、3つの中では一番対応しているブラウザが多い。
Edge、Firefox、Chrome、Operaなど。

今後どうしたらいいか

上記の通り、すべての画像を一つの形式に絞り込むのは現実的ではないので、
複数の画像形式を用意し、picture要素、source要素で対応ブラウザごとに
出し分けをするのが良さそう。

※picture要素はIE11が対応していないので要注意

完璧な私見ですが、WebPが生き残りそうな予感がしてます。
Googleは強い。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

~初心者だけど頑張ってアウトプットします~

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!