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

2019年1月20日

WebP、JPEG2000、JPEGXR対応表アイキャッチ

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

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

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

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

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

JPEG 2000 JPG XR WebP
Chrome × ×
FireFox × × ○(v65で対応)
safari × △(HTML読込で表示可)
Edge × △(HTML読込で表示可 / v18で完全対応予定)
IE11 × △(HTML読込で表示可)

※2018年12月現在 主要ブラウザの次世代画像規格対応状況(予定含む)。

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

  • Chrome:v70.0.3538.110 Win10
  • Firefox:v63.0.3 Win10
  • safari v12(MacPC, iPhone)
  • Edge v17.17134

safari、Edge、IEのWebP対応状況がが△(HTMLで表示可)とあるのは、サイトのページ上やWordPressの記事などでimgタグで読み込んでいる分には表示される、という意味です。

つまり実用レベルでは問題なく表示されてはいます。ただ、WebP画像そのもののURLにアクセスしようとすると本来画像だけが表示されるべきところが、ファイルそのものダウンロードになったり、画像ファイルのコードが表示される状況。

私の勝手は推測ですが、各ブラウザがHTML5に対応しているためにimgタグでの読込ならWebP画像が表示できるけど、ブラウザとしては対応していないため画像ファイルそのものは開けない、といったところでしょうか。

結論:WebP大勝利

結論、主要ブラウザはすべてWebP対応ですが対応はこれからです。

長らく休戦状態だったJPG後継規格大戦はGoogle WebPの大勝利に傾きました。さらばJPG XR、さらばJPEG 2000。

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

ただ、IE11が今後対応予定がないのが問題。WEB業界では化石扱いのIE11もまだまだ人気(?)で日本国内シェアは2位の16%。(世界シェアは4位 / 2018年11月20日時点)

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

UAとってEdgeとIE11だけJPG XRを表示させる方法もありますが、WebPと別にJPG XRを用意する手間を考えるとがっついて対応するのはあまりに非効率。SEO専門のスピード特化のF1サイトでもない限りは現状維持でいいでしょう。

WordPress(v4.9.8)やPhotoshopCC2019(v20.0.1)など主要なアプリケーションやソフトウェアも現状WebP非対応で、まだまだWebPを常用するには面倒が多い状況です。この辺の事情は下記リンクよりどうぞ。

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

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

テスト画像

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

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

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

JPEG 2000

お使いのブラウザはJPEG 2000画像非対応です。

Appleが推してるJPEG 2000対応。

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

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

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

JPG XR

お使いのブラウザは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開放しちゃうよ?んん?

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

2018年12月現在はEdgeやIEが非対応の状況ですが、今後対応することが決まっています。

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

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

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

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

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