WebP / JPEG 2000 / JPG XR 主要ブラウザ対応表＆テスト画像

2018年11月30日

Google PageSpeedInsightsがにわかにJPEG2000 / JPG XR / WebPを推奨しはじめたので導入を、考えていらっしゃる方も多いことでしょう。

本記事ではブラウザごとのJPEG2000 / JPG XR / WebP画像対応状況と今後の展望を解説します。ご参考になれば。

実際にお使いのブラウザでも確認できるよう実物のJPEG 2000 / JPG XR / WebP画像も載せています。テストにお使いください。

（ちなみに上のアイキャッチ画像はPNGファイルなのでどのブラウザでも表示されます）

主要ブラウザごとのJPEG2000 / JPG XR / WebP画像対応状況

ブラウザJPEG 2000JPG XRWebP
Chrome××○
FireFox××○（v65で対応）
safari○××
Edge×○○（v18で対応）
IE11×○×

※2019年9月現在 主要ブラウザの次世代画像規格対応状況（予定含む）。

予定を除く確認環境は下記。

  • Chrome：v70.0.3538.110 Win10
  • Firefox：v63.0.3 Win10
  • safari v12(MacPC、iPhone)
  • Edge v18.18362

結論：WebP大勝利

結論、主要ブラウザはすべてWebP対応に傾き、WebPが主流になることでしょう。

長らく休戦状態だったJPG後継規格大戦はGoogle WebPの大勝利に傾きました。約束されし勝利の拡張子です。さらばJPG XR、さらばJPEG 2000。きみのこと、嫌いじゃなかったよ。

2019年9月2日現在、主要ブラウザではEdgeが非対応ながら今後対応する予定。（EdgeにいたってはブラウザエンジンをGoogle Chromeと同じChromiumに切り替えるとも）

ただ、safariとIE11が今後対応予定がないのが問題。

safariはiPhone、iPad、MacPCなどApple系デバイスのデフォルトブラウザなのでこれがかなり痛い。

WEB業界では化石扱いのIE11もまだまだ人気（？）で日本国内シェアは2位の16％。（世界シェアは4位 / 2018年11月20日時点）

すぐにWebPに切り替えるとIE11ユーザーらに「 このサイト画像表示されない、壊れてる 」とそっぽを向かれ、離脱率上昇でGoogle検索順位まで下がりかねません。SEOのつもりが逆効果です。

UAをとってEdge / IE11だけJPG XRを、safariにはJPEG2000、もしくはいままで通りPNGやJPGで表示させたり.htaccessで振り分ける方法もあります。が、WebPと別にJPG XRもJPEG2000も用意する or PNGかJPGを用意する手間を考えるとがっついて対応するのはあまりに非効率。

SEO専門とかスピード特化のF1サイトでもない限りは現状維持でいいでしょう。

2019年9月2日現在においても、WordPress（v5.2.2）やPhotoshopCC2019（v20.0.6）など主要なアプリケーションやソフトウェアもWebP非対応で、まだまだWebPを常用するには面倒が多い状況です。この辺の事情は下記リンクよりどうぞ。

本サイトもWordPressでJPGとPNG使っていますが、新しいGoogle PageSpeedInsightsでも90点後半をたたき出してます。しかもサーバー応答速度が遅いと悪評のロリポップで。

各アプリケーションも急速にWebPへの対応がしていくと予想されるので、ある程度対応が進んでからでいいでしょう。

テスト画像

以下、表示テスト用に実物のJPEG2000 / JPG XR / WebP画像を載せておきました。

ALT属性には「 お使いのブラウザは○○画像非対応です 」と仕込んであります。画像が非表示だったりALT内のテキストが見えたらお使いのブラウザは非対応です。safariはALTテキスト表示されないっぽい。

画像ファイルそのものへ別タブで開くリンクも張ってあり、クリック or タップで挙動も確認いただけます。（非対応のブラウザでクリックするとファイルとしてダウンロードしようとしたりします）

JPEG 2000

Appleが推してるJPEG 2000対応。

こちらのJPEG 2000画像で使った拡張子は .jpf です。

JPEG 2000はブラウザでいえばiPhone / iPadやMac PCのsafariと相性がいいはず。

ちなみにJPEG 2000はJPEGと2000の間にスペースをひとつ置いて離すのが正式の書式。

JPG XR

関係ないけどJPG XRってなんかiPhoneみたいな名前。

JPG XRはEdge / IE、ほかWindowsなどMicrosoft系のソフトと相性がいい。拡張子は .jxr を使用。

デフォルト状態のPhotoshopではJPG XRで保存できないのでMicrosoft提供のプラグインを使って書き出しました。

ただ、PhotoshopCCだと対応してないのかうまく保存できずCS6まで引っ張り出したよ……

（Windows版PhotoshopCC2019 V20.0.1 / PhotoshopCC2018 V19.1.7でダメでした）

WebP

解放しちゃうよ？ ん？ いいの？ WebP開放しちゃうよ？ んん？

WebPが相性いいのはGoogle系、つまりChrome。画像ファイルの拡張子は .webp。

さらに、Chrome最大のライバルFirefoxもEdgeもすでにWebPに対応。

つまり新世代画像規格の王者はWebP。もうWebPがJPG後継で決まったようなものだから、どんどんWebP対応進んでほしいですね。

まとめ：JPEG 2000 / JPG XR / WebP ブラウザ対応表＆テスト画像

どれも比較的新しく、画質や軽量さの面でJPGより優れているのは確か。なのに推奨する陣営（Apple / Microsoft / Google）の違いのために放置されてきた残念な次世代画像規格たち。

しかしスマホの台頭とユーザーファーストを掲げるGoogleによるページ表示速度改善＝軽量化の推進により、ようやくJPGの後継規格がWebPで統一されていくかも。

長いことお疲れ様JPG。ようこそWebP。そしてなにより、WEB関連エンジニアさん、WebPへの対応ホントにご苦労様です……

Chrome,Firefox,PC全般,ソフトウェア,拡張子Chrome,Edge,FireFox,InternetExplorer,JPEG 2000,JPG,JPG XR,PageSpeed Insights,WEBP,拡張子,画像,規格