PNGやJPEGより圧縮性能が高い次世代画像フォーマットのWebPを使おう！

なぜ今WebPの話題が出ているのか？

実はWebPは2010年から存在する画像フォーマットなのです。Webに精通している人なら何度か目にした事があると思います。しかしながら、WebPは圧縮率も高くて優秀なのに今までそんなに話題になっていませんでした。それにはしっかりとした理由があります。それは対応ブラウザの少なさでした。公開された当初はGoogle Chromeのみの対応で、WebPを使ってもほとんどのブラウザで表示されないという問題がありました。

ですが、2018年10月に状況が一変する大事件が起こります。今までWebPに対応してこなかったMicrosoft EdgeがWindows 10 October 2018 Updateで正式にサポートすることを発表しました。その発表の影響を受けてMozilla Firefox 65でのWebPの対応を発表し、ついに1月31日のMozilla Firefox 65へのアップデートで正式に対応しました。つまりこれでPCの主要ブラウザたちであるGoogle Chrome、Microsoft Edge、Mozilla Firefox、Operaと対応ブラウザが一気に増え、そろそろWebPを実際に使い始めてもいいレベルにブラウザ対応度が上がったわけです。

2019年2月現在のWebPの対応ブラウザについて

Can I use... Support tables for HTML5, CSS3, etc - WebP

2019年2月現在の対応ブラウザです。対応ブラウザについてはCan I use... Support tables for HTML5, CSS3, etcで見ることができます。Internet ExplorerはMicrosoftに見捨てられて今後アップデートがなく未来のない廃れゆくブラウザなので無視できるとして、ここで問題となるのはSafariです。なぜSafariが問題なのかというと日本ではiPhone率が諸外国に比較しても異常に高いので、スマホからのSafari利用者がかなりの数いるのです。WebPはスマホなどの回線の弱い環境のほうがその効果が輝きますし、SafariのWebP対応はユーザーには良いことしかないので、Safariには早急に対応してもらいたいですね。

対応ブラウザ

• Google Chrome
• Mozilla Firefox 65以降
• Microsoft Edge 18以降
• Opera

非対応ブラウザ

• Safari
• Internet Explorer

WebPは圧縮率が高く、アルファチャンネルも扱えてとても優秀

WebPはWebサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格としてGoogleが開発しています。ファイルサイズは非可逆圧縮モードで同等画質のJPEGやPNGと比較して約30％程度小さくできます。Webサイトの表示において、ダウンロードサイズの大多数を占める画像ファイルサイズを小さくすることは、サイトの表示速度を高速化する上で絶大な効果を発揮します。現在のJPEGやPNGを最適化するかWebPに置き換えることでサイトの高速化においてはかなり有効な手段の一つと言えます。

また、JPEGとは異なり非可逆圧縮でもアルファチャンネルを扱えるのも大きな特徴です。アルファチャンネルが使えるとどう変わるのかというとPNGのように画素の不透明度(opacity)を設定できて、一部透過画像などを扱えるようになります。

PNG/JPEGとWebPでの画像品質とファイルサイズの比較

こちらがオリジナルのJPEGとPNGです。この画像をJPEGとWebPの品質75で変換した際の違いと、PNGを最適化したOptiPNGとWebPの品質75で変換した画像を比較してみたいと思います。画質とファイルサイズはトレードオフなので、同程度の画質でどれだけファイルサイズが小さくできるかが注目点となります。

JPEG

JPEGとWebPのエンコード後の比較です。左がJPEGを品質0.75で変換したもの、右がWebPに品質75で変換したものです。JPEGの品質75で変換した際の圧縮率は78％で41.5KB、WebPに変換して圧縮した結果の圧縮率は83%で31KBでした。双方の画像を見比べて見るとオリジナル画像に比べるとやはり同程度モスキートノイズが出ています。しかし、ファイルサイズは圧縮後のJPEGとWebPでは25%程度WebPの方が軽量になっています。

JPEG(Orijinal)

182KB

JPEG(quality=75)

41.5KB

WebP(quality=75)

31KB

PNG

PNGとWebPのエンコード後の比較です。左がPNGを最適化したもので、右が右がWebPに品質75で変換したものです。 PNGは最適化したことで圧縮率は22%で9.2KB、WebPは品質75なので圧縮率は73%で3.1KBでした。PNGは最適化しただけなので画質の劣化はないのですが、WebPは品質75とJPEGの時のように劣化しているかと思いきや、オリジナルと比較しても違いはほぼわかりませんでした。これはすごいですね。ちなみに画質劣化のないLosslessでWebPに変換した際も圧縮率59%で4.9KBと素晴らしい結果でした。

PNG(Orijinal)

11.9KB

PNG(Optimaize)

9.2KB

WebP(Lossless)

4.9KB

WebP(quality=75)

3.1KB

WebP非対応ブラウザに対応するPictureタグ

非対応ブラウザが残っている状況でWebPにすべてを置き換えてしまうと、非対応ブラウザでは画像が表示できないという問題が発生してしまいます。以前私が作ったNetaGearのように画像を一切使わずCSSだけでデザインされているサイトなら問題ないですが、現代のWebサイトで画像が表示されないというのはかなりの問題です。

<picture>
    <source srcset="webpの画像ファイル" type="image/webp">
    <img src="jpg/pngの画像ファイル" width="350" height="230">
</picture>

それらの解決してくれるのがPictureタグです。Pictureタグを用いることでWebP対応ブラウザはWebPを読み込み、WebP非対応ブラウザでは通常のimgタグでJPEGを読み込ませることが可能なのです。この記述ならば非対応ブラウザがあってもきちんと画像が表示されますし、WebP対応ブラウザでは軽量なWebPを読み込むので、画像の表示を高速化することができます。

Can I use... Support tables for HTML5, CSS3, etc

Pictureタグはすでに殆どのブラウザで対応済になっていますし、Internet Explorerだけは対応してないのですがブラウザではimgタグとして認識されているのか画像はしっかり表示できているようです。このサイトでも実験的にWebPの導入を試しており、トップページの画像はすべてPictureタグでWebPとJPEG＆PNGに変えているのですが、私の確認した限りではInternet Explorerを含め問題なく表示できています。

WebPの変換方法！

画像のWebP形式への変換方法についてですが、基本的には2通りあります。一つはブラウザ上で変換を行う方法です。もう一つはPC内でソフトを使って一括変換する方法です。一つ一つ丁寧に変換する場合は「Squoosh」がおすすめです。大量の画像をWebPに一括変換したい場合は「WebPconv」が便利です。用途によって使い分けるのが良いと思います。

使い方については上記記事にまとめているので、ぜひそちらをご覧になってWebPへ変換を試してみてください。

今回の個人的感想＆まとめ

今回は次世代静止画フォーマットのWebPの紹介でした。今回はサイト運営者向けの記事でしたね。実際にWebPを使ってみるとほぼ同じくらいの画質でファイルサイズがかなり小さくできるのでおすすめです。このサイトでも記事以外の画像などはすべてWebPにしました。トップページはすべての画像をWebPに置き換えましたので、以前より表示速度が上がっていると思います。

記事内の画像の変換についてですが、このブログはFC2ブログを使っているので、記事内の画像はすべて手動で書き換えないといけないため断念しました。このあたりは一括で変換できないのは外部のブログサービスを使っている弱みですね。ちなみにWordpressでは「EWWW Image Optimizer」なるプラグインを入れて、「JPG, PNG から WebP」にチェックをいれるだけで実装可能なのようです。

サイトの高速化というのはかなり大事な要素の一つですし、画像が多いサイトではWebPの導入は効果絶大だと思います。スマホもAndroidユーザーは基本的にブラウザはChromeだと思うので、モバイルユーザーの表示速度が上がるのはうれしいですね。スマホのサイトで表示が遅いとイライラしますので、その打開策になると思います。あとは現状Safariが対応していませんが、こちらも近いうちに対応してくれることを願うばかりです。