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

2019年4月10日

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 × ×
Edge × ×
IE11 × ×

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

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

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

結論:WebP大勝利

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

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

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

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

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

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

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

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

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

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

テスト画像

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

ALT属性には「 お使いのブラウザは○○画像非対応です 」と仕込んであります。画像が非表示だったりALT内のテキストが見えたらお使いのブラウザは非対応です。safariは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への対応ホントにご苦労様です……