次世代画像フォーマット
Webサイトの運用や開発をしていると「Webサイトの高速化」という課題はよくでてくる話でその中で「次世代画像フォーマット」というキーワードも何度か聞いたことがあるかと思います。ただ「JPEGやPNGより早いんじゃない?」くらいの知識しかもっていない人も多いはず。(私も含め)
今回はその次世代フォーマットと呼ばれる「WebP」「JPEG200」「JPEG-XR」を検証して実際に使えるのかという観点で見ていきたいと思います。
「WebP」「JPEG 2000」「JPEG-XR」とは
まず、「WebP」「JPEG 2000」「JPEG-XR」とありますがそれぞれどんなものなのか?というと、
WebP
Googleが開発した最新画像形式。Web上の画像に優れた可逆圧縮および非可逆圧縮を提供し、より小さくリッチな画像を作成することができWebを高速化することができる。
JPEG 2000
JPEG 2000アーキテクチャは、ポータブルデジタルカメラから高度なプリプレス、医療画像、地理空間、その他の主要なアプリケーションドメインに至るまで、幅広い用途に適しており、従来のJPEGよりも高速ではるかに効率的に使用できる。
JPEG-XR
JPEG XRの主な用途は、写真画像などの連続階調静止画像の表現である
最適化された画像品質と圧縮効率の利点と、複雑さの低いエンコードおよびデコードの実装要件を兼ね備えており、高い圧縮率と低メモリリソース使用率などのメリットもある。
どれも従来の画像フォーマットと比較して低サイズで同画質を再現できるというよう見えます。百聞は一見に如かずということで実際にPNGとJPEGファイルを変換してみたところ以下のようになりました。
| 元サイズ | WebP | JPEG 2000 | JPEG-XR | |
|---|---|---|---|---|
| JPEG | 245KB | 114KB | 413KB | 103KB |
| PNG | 26KB | 10KB | 35KB | 22KB |
JPEGから変換した場合、WebPとJPEG-XRでは約半分以下なり、PNGから変換した場合ではWebPのサイズが半分以下になっています。JPEG2000は品質の問題か今回の検証ではサイズ増という結果となりました。
次に見た目ですが、以下のスクリーンショットでは、実際拡大しても違いが判らない程度でした。
ここまでの結果で考えると従来の画像フォーマットと比較し低サイズ・同画質ということであれば置き換える価値はあると思います。ただ検証中に問題となったのは対応ブラウザの違いです。
ブラウザの対応状況
実際の検証でWEBページをChromeでアクセスすると 「JPEG 2000」と「JPEG-XR」が表示できない問題が発生しました。
ブラウザの次世代拡張子の対応状況はバラバラで、実際の検証した結果の対応状況は以下のようなものでした。Chrome、Firefoxについては、WindowsとMacで同じ結果でした。
| IE11 | Edge | Chrome | FireFox | Safari | |
|---|---|---|---|---|---|
| WebP | × | 〇 | 〇 | 〇 | × |
| JPEG 2000 | × | × | × | × | 〇 |
| JPEG-XR | 〇 | 〇 | × | × | × |
〇:表示可、×:表示不可
対応ブラウザを確認できる"Can I use"でも同様のようです
- WebP
https://caniuse.com/#search=WebP - JPEG 2000
https://caniuse.com/#search=JPEG2000 - JPEG-XR
https://caniuse.com/#search=JPEG-XR
対応しているブラウザをみると「WebP」が一番有力にみえますが、「Safari」と「IE11」が対応していない事が実際に使う上での課題になりそうです。モバイルからのアクセスでみるとSafariの使用率は高いですし、日本におけるPCからのアクセスに限ればIE11は未だに10%前後のシェアをしめています。
モバイル専用サイトなどであれば、
確認が必要な点
対応しているという点でいえばもう一つ考えなければならない重要なことがあります。Webシステムの運用にCMS(Contents Management System)を利用している場合です。CMSでコンテンツを管理している場合、画像などもCMS内に保存していることが多いと思います。その場合、今回の次世代画像フォーマットの画像拡張子をCMSが対応しているかという点を確認しなければなりません。CMSがWebP拡張子(.WebP)を画像の拡張子として利用・判断できなけければただのファイルとして扱ってしまい、プレビュー表示ができないといった問題やそもそもCMS内に保存できないといった想定外の事象が発生してしまいます。
今回は「次世代画像フォーマット」が実際に使えるの?というテーマで検証をしてみました。確かに従来と同画質の画像を低サイズで利用できるのは実に魅力的かと思います。
ただ、対応ブラウザにおいて網羅的に対応している拡張子が存在していない。という点がネックなような気がします。対応方法によってはWebP拡張子使用しつつも他ブラウザに対応するようなことは可能ですが、前述したように効果が開発・運用にかかる労力に見合うかという点が気になってしまします。また多くのCMSのデフォルトの設定が「次世代画像フォーマット」をサポートしていないというところをみると、まだ少し早いのではないかと思いました。