WebPとは

WebP(ウェッピー)は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。
https://ja.wikipedia.org/wiki/WebP

これらの特徴のほか、

  • WebP lossy support
  • WebP lossy, lossless & alpha support
  • WebP Animation support

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで(同一画像、同等画質の)JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。

圧縮率は従来のフォーマットよりも優れており、WebPを導入でページのロードタイムが30%改善されたという事例もある。

また、Googleが推し進めているためか、Lighthouseでは「次世代フォーマットで画像を配信」といったWebPの利用を進めるレポート結果が出る場合もある。

WebP変換方法

cwebpを使ってみる。

brew install webp

でインストールして、

cwebp -q 80 hoge.png -o hoge.webp

みたいな形で変換を行う。簡単。

実装方法

WebPは、すべてのブラウザで対応されているわけではない。今現在、全体の72%が対応している状況である。(サポート状況

既存のフロントエンド実装をそのまま活かしたい、もしくは未対応ブラウザでのフォールバック対応を行いたくない場合は、Acceptリクエストヘッダーを利用して、サーバ側で適切な画像フォーマットをクライアントへ配信する仕組みもつくる事ができるだろう。
しかしながら本記事では、HTML5の<picture>要素を使ったフロントエンドでの実装方法について記載する。

<picture>要素を使う

<picture>要素を利用することで対応していないブラウザへのフォールバックが簡単に行える。

<picture>
  <source srcset="https://www.gstatic.com/webp/gallery/1.webp" type="image/webp">
  <source srcset="https://www.gstatic.com/webp/gallery/1.jpg" type="image/jpeg"> 
  <img src="https://www.gstatic.com/webp/gallery/1.jpg">
</picture>

<picture>要素の非対応ブラウザへの対応

ほとんどのブラウザは対応しているが、IE11が対応していないため、polyfillを使用する必要がある。
polyfillでググると色々と出てくるのだが、polyfill.ioを利用していきたいと思う。

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CHTMLPictureElement"></script>

polyfill.io経由でpolyfillを取得することで、対応ブラウザへの無駄なpolyfillを配信せずに済む。

デモ

おわり

WebPは画像サイズを大幅に削減だけではなく、フォーマットが統一されることでの管理コストも下げられるのではないかと思う。ただ、実際はブラウザのサポート状況を考慮する結果、フォーマットが統一されるどころか重複した管理になってしまう点は否めない。
非サポートブラウザの影響のない環境下であれば(たとえばモバイルサイト)、低コストで大幅なフロントエンドの改善が見込まれるのではないだろうか。