WebPはGoogleがメインで開発を進めている画像フォーマットです。写真やイラストなど用途を区別せずに使えるフォーマットで、とてもサイズが小さく済むのが特徴です。しかし、対応しているブラウザが限られるのが難点です。 そこで使ってみたいのがwebp-heroです。WebP非対応ブラウザでも表示可能にするpolyfillライブラリです。

webp-heroの使い方

Safariでの表示です。ちゃんとWebPが表示されています。

種明かしをすると、webp-heroはWebP画像をJavaScriptでPNGに変換してsrcに直接埋め込んでいます。速度面で気になることはないのですが、WebAssembly化したら十分実用的になる気がします。

webp-heroはTypeScript製のオープンソース・ソフトウェア（ISC License）です。

webp-hero chase-moskal/webp-hero: browser polyfill for the webp image format