narico3
narico3.qrunch.io

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

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は強い。

関連記事

コメントはありません。
narico3
narico3.qrunch.io
フロントエンドエンジニアを目指すマークアップエンジニア兼WEBデザイナー。 HTML/CSS/JavaScript
フォロー
フォロワー
ブログを開設

クランチで技術ブログを
始めてみませんか?

この先は、クランチへのアカウント登録、及びログインが必要なページになります。

Markdownの書き方
見出し # 見出し(h1)
## 見出し(h2) , ### 見出し(h3) ...
リスト - 箇条書き
   - タブでインデント
番号付きリスト 1. テキスト
2. テキスト
改行 行末に半角スペース2つ
リンクの挿入 [タイトル](https://xxx.com)
引用 > テキスト
コード挿入 ```cpp:title
code
```
画像の挿入 ![代替テキスト](URL "タイトル")
太字 **テキスト**
斜体 *テキスト*
打消し線 ~~テキスト~~
水平線 ***
技術ブログを開設
ログイン