webp-hero - WebP非対応ブラウザでも表示するpolyfill
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