軽くてマルチな次世代画像フォーマット「WebP」

f:id:t-ookubo:20200817130759p:plain

 こんにちは。フロントエンドエンジニアのオオクボです。
今回は次世代画像フォーマットWebP(ウェッピー)についてのお話です。

WebPとは

Googleが提供する、可逆圧縮非可逆圧縮に対応した最新の画像フォーマットです。
ファイルの拡張子は「.webp」。

次世代規格争いから見るWebPの勢い

 画像フォーマットとして代表されるのは、Web普及の黎明期から現在に至るまで標準的に用いられている「JPEG」「GIF」「PNG」ではないでしょうか。これらが長きに渡りWebを支え続けている間にも、各社がこぞって画像圧縮技術の開発や採用を推し進めました。中でも有力なのがMicrosoftの「JPEG XR」、Appleの「JPEG 2000」、そして当記事で取り上げるGoogleの「WebP」です。ところが、シェア競争の思惑からいずれも浸透は滞るばかりでした。次世代規格と言われるもののWebPの提供開始は2010年9月ですから、いかに争いが熾烈なものだったか察せられますね。

 泥沼化していた規格争いにもとうとう決着か、2020年8月現時点、IESafariを除くほとんどのブラウザでWebPが利用可能になりました。以下はWeb技術へのブラウザ対応状況が調べられるサイト「Can I Use...」でWebPを検索した結果です。Safariも次期のバージョン14でWebPに対応するため、対応ブラウザの最新状況がIEのみのJPEG XR、SafariのみのJPEG 2000を完全に抜き去ったと言えます。
 f:id:t-ookubo:20200817172652j:plain

 特にJPEG XRについては、Chromiumベースの新Edgeで利用不可になった事から失速は免れず、WebPの一強化により拍車がかかる事でしょう。こうした経緯からWebPの注目度はきわめて高く、Web制作において必須知識となる事が予想されます。

 WebPを利用するメリット

メリット1:ファイルサイズを小さくできる

 従来の主要フォーマットに比べ優れたアルゴリズムの可逆・非可逆圧縮両方式を扱う事が可能で、WebP Lossless(可逆圧縮)画像はPNGに比べて約26%、WebP非可逆圧縮画像はJPEGに比べて約25~34%ファイルサイズを軽量化できます。
 以下は同じ画像をJPEG・WebP(非可逆圧縮)形式で保存し、情報を比較したものです。JPEGでは520KBである事に対しWebPでは314KBと、およそ40%ファイルサイズが削減されています。

f:id:t-ookubo:20200818202726p:plain

 画像のファイルサイズが小さくなる事でページ表示が高速化し、SEO対策・使いやすさ(UX)の向上が見込まれます。Chromeの開発者ツールに搭載されているSEO計測機能「Lighthouse」では画像が次世代フォーマットに対応しているか否かは評価対象となっており、非対応の場合は以下の通り「Performance」診断で警告が表示され、旧フォーマット画像の数だけスコアから減点されてしまいます。次世代フォーマット対応はもはや看過し難い項目となっている事が窺えます。

f:id:t-ookubo:20200817175635j:plain

 反対に次世代フォーマットに対応した画像の分だけ評価が上がる事から分かる通り、画像を多く用いたリッチなウェブサイトほど軽量化による恩恵が期待できます。ヒーローイメージ等大きな画像でユーザーの心を掴むデザインが流行の今、WebP対応は非常に有効なサイト改善施策と言えるでしょう。

メリット2:アルファチャンネル(透過)・アニメーションに対応している

JPEG非可逆圧縮のため圧縮率が高く、色数の多い写真の保存に有効ですが、透過・アニメーションには対応していません。一方GIFとPNGは透過・アニメーションが可能ですが、可逆圧縮のため圧縮率は高くありません。こうした個々の特性から、従来は画像の用途に応じてフォーマットを使い分ける必要がありました。この垣根を取り払ったのがWebPです。
可逆圧縮方式のWebP Lossless画像であれば22%のファイルサイズ追加で透過がサポートされ、またツールを用いる事でアニメーション化も可能です。加えてメリット①で述べた通り旧フォーマットを超える圧縮率を誇りますから、画像ファイルはWebPさえ配置しておけば間違いはない、という日もそう遠くないかもしれません。

WebPを利用するデメリット

デメリット1:サポートされていないブラウザがある

 2020年8月現時点において、IEおよびSafariiOS含む/バージョン13)はWebPに非対応です。JPEGPNGと同じ要領で<img src="src/image.webp">のように画像を参照してしまうと、先述のブラウザでは表示できません。これがどれだけ致命的かはブラウザのシェアから推察できます。
 以下は全世界のウェブブラウザシェアを解析できるサイト「StatCounter」で、日本国内における統計をデスクトップ・モバイル別に出力した結果です。

デスクトップ
f:id:t-ookubo:20200818165803p:plain
1. Chrome:58.43%
2. Safari:9.63%
3. IE:9.23%
4. Edge:8.21%
5. Firefox:7.54%
6. Edge Legacy:4.09%

モバイル
f:id:t-ookubo:20200818165825p:plain
1. Safari:59.8%
2. Chrome:34.04%
3. Samsung Internet:3.09%
4. UC Browser:0.85%
5. Android:0.7%
6. Firefox:0.54%

 マーカーで強調された項がWebP非対応ブラウザです。番号付きリストはシェア6位までを取り上げたものとなりますが、その内でさえ非対応ブラウザのシェアがデスクトップでは計22.95%、モバイルでは59.8%にも上る事が読み取れます。ことモバイルに関してはiPhone版のChromeFirefoxがWebP非対応であるため、実情は見かけの値より厳しいと考えられます。

デメリット2:WebP非対応ブラウザ向けにフォールバックを取る必要があり、結果サイトのファイルサイズが膨らむ

 WebPはまだ標準的な画像フォーマットではないため、対応ブラウザにはWebPファイルを、非対応ブラウザ向けにはJPEGPNG等旧フォーマットの画像ファイルを見せるというフォールバックが現状必要となります。
従って同じ画像をWebP・非WebPの最低2形式用意しなければならず、結果サイト自体の容量は増加、画像のファイル数は最悪倍増してしまいます。

 また、勿論WebP対応ブラウザからアクセスした場合のページ表示速度は向上しますが、非対応ブラウザの場合見せる画像は旧フォーマットのものであり、結局従来と変わらない訳です。改善の度合いと工数を吟味すると腰が重くなるやもしれません。

 しかしデスクトップにおいては7割以上のユーザーに対し効果が見込まれ、かつバージョン14からはSafariもWebPをサポートする事を考えれば、今から対応しておく価値は決して低くありません。
 今秋リリース予定の新BINDupでは、基本的にWebP非対応ブラウザ向けのフォールバックをHTML5.1から登場したpicture要素で対応しております。

Before

<img src="_src/0001/image.jpg" alt="image01">

After

<picture>
    <source srcset="_src/0001/image.webp" type="image/webp">
    <img src="_src/0001/image.jpg" alt="image">
</picture>

 このようにsource要素ではWebP画像を、img要素では旧フォーマット画像を参照させて列記し、これらをpicture要素で括る事でフォールバックが実現できます。尚、picture要素によるWebP対応に当たってのポイントは下記の通りです。

  • 必ずsource要素→img要素の順番で並べる
    (img要素が上段に来ると、こちらで指定した旧フォーマット画像が参照されてしまい、source要素の参照が無視される)
  • IEではpicture要素が利用できない為、「Picturefill.js」でポリフィルするなど要考慮
  • img要素にCSSが適用されている場合、同様のCSSをpicture要素に適用する必要はない

まとめ

 画像の軽量化という目的に加えてブラウザ対応の手間もあり、確かにWebP対応は妥協してしまいがちな課題かもしれません。
しかしブラウザ対応状況を見てもJPEG XR、JPEG 2000に大差をつけており、次期Safariでのサポートが決まった今、次世代画像フォーマット競争はWebPが先行している事は間違いないでしょう。
弊社が開発しているCMSBiNDup」では、この秋からWebPに対応すべく準備を進めています。
JPEG・GIF・PNGらに取って代わる日に期待しつつ、知見を深めていきたいテーマです。

オオクボ カテゴリーの記事一覧 -