零弐壱蜂

IE11などレガシィブラウザを意識したWebP画像の表示方法

4 min read

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

Edit on GitHub