次世代画像フォーマット

はじめに

Webサイトの運用や開発をしていると「Webサイトの高速化」という課題はよくでてくる話でその中で「次世代画像フォーマット」というキーワードも何度か聞いたことがあるかと思います。ただ「JPEGやPNGより早いんじゃない?」くらいの知識しかもっていない人も多いはず。(私も含め)

今回はその次世代フォーマットと呼ばれる「WebP」「JPEG200」「JPEG-XR」を検証して実際に使えるのかという観点で見ていきたいと思います。

「WebP」「JPEG 2000」「JPEG-XR」とは

まず、「WebP」「JPEG 2000」「JPEG-XR」とありますがそれぞれどんなものなのか?というと、

WebP

JPEG 2000

JPEG-XR

どれも従来の画像フォーマットと比較して低サイズで同画質を再現できるというよう見えます。百聞は一見に如かずということで実際にPNGとJPEGファイルを変換してみたところ以下のようになりました。

JPEGから変換した場合、WebPとJPEG-XRでは約半分以下なり、PNGから変換した場合ではWebPのサイズが半分以下になっています。JPEG2000は品質の問題か今回の検証ではサイズ増という結果となりました。

次に見た目ですが、以下のスクリーンショットでは、実際拡大しても違いが判らない程度でした。

ここまでの結果で考えると従来の画像フォーマットと比較し低サイズ・同画質ということであれば置き換える価値はあると思います。ただ検証中に問題となったのは対応ブラウザの違いです。

ブラウザの対応状況

実際の検証でWEBページをChromeでアクセスすると 「JPEG 2000」と「JPEG-XR」が表示できない問題が発生しました。

ブラウザの次世代拡張子の対応状況はバラバラで、実際の検証した結果の対応状況は以下のようなものでした。Chrome、Firefoxについては、WindowsとMacで同じ結果でした。

〇:表示可、×:表示不可

対応ブラウザを確認できる"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%前後のシェアをしめています。

モバイル専用サイトなどであれば、タグで 「Safari」だけJPEGにするなどの対応も検討の余地がありますが、PCサイトも考慮するとなるとIE11(10%前後)を無視することはできないです。ということは「WebP」を使用して高速化をするにしても「Safari」と「IE11」では使えないし個別の対応が必要となるということでしょうか。。開発・運用するにしても労力がかかりそうです。

確認が必要な点

対応しているという点でいえばもう一つ考えなければならない重要なことがあります。Webシステムの運用にCMS(Contents Management System)を利用している場合です。CMSでコンテンツを管理している場合、画像などもCMS内に保存していることが多いと思います。その場合、今回の次世代画像フォーマットの画像拡張子をCMSが対応しているかという点を確認しなければなりません。CMSがWebP拡張子(.WebP)を画像の拡張子として利用・判断できなけければただのファイルとして扱ってしまい、プレビュー表示ができないといった問題やそもそもCMS内に保存できないといった想定外の事象が発生してしまいます。