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

公開日: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は強い。

記事が少しでもいいなと思ったらクラップを送ってみよう!
180
+1
~初心者だけど頑張ってアウトプットします~

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする